Color Contrast Checker
Check a foreground color against a background color for WCAG 2.2 AA and AAA. See the contrast ratio, UI/non-text results, and optional accessible color fixes.
What Is a Color Contrast Checker?
A color contrast checker compares a foreground color with a background color and calculates the WCAG contrast ratio, then checks whether the pair meets relevant AA, AAA, and non-text thresholds.
How to Use the Color Contrast Checker
- Enter a text/foreground color.
- Enter the background color.
- Review the contrast ratio.
- Check AA and AAA results.
- Test UI/non-text contrast where relevant.
- Use a suggested color fix if the pair fails.
- Preview the colors with different text sizes or UI examples.
- Copy the final colors or CSS variables.
WCAG AA vs AAA Contrast
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI / relevant non-text | 3:1 | N/A |
AAA is not universally required. Non-text 3:1 is a separate criterion, not an AAA equivalent.
What Contrast Ratio Is Required for Large Text?
WCAG large text is 18 point or larger regular text, or 14 point or larger bold text. In CSS that is commonly treated as 24px regular or about 18.66px bold. This tool uses those sizes to decide whether the sample qualifies as large text. It does not treat every heading as large just because it looks bigger.
What Is Non-Text Contrast?
WCAG 2.2 SC 1.4.11 asks for 3:1 where visual information is needed to identify a control, its state, or a meaningful graphic—buttons, input borders, focus indicators, icons. It does not automatically apply to every decorative border.
How to Fix Low Color Contrast
- Darken the foreground or lighten the background.
- Apply an accessible suggestion from the tool.
- Adjust lightness while keeping hue.
- Do not rely on color alone for status.
- Check UI/non-text elements separately.
Why Similar or Different Colors Can Still Fail Contrast
Contrast uses relative luminance, not RGB distance. Bright red and green can look different and still fail. Mid-gray on a slightly lighter gray can fail even when the hex values look distinct. Example: #000000 on #FFFFFF is 21:1. #767676 on white is about 4.54:1 (AA normal pass). #777777 on white is about 4.48:1 and fails AA normal—this tool does not round that up to 4.5.
Color Contrast and Color Blindness
Hue differences may not stay distinguishable. A passing ratio is useful and not sufficient for every color-vision need. The simulator is a preview aid, not a replacement for the ratio.
Check Multiple Colors in a Palette
Use the palette checker above for brand tokens, light/dark themes, and semantic colors such as text, background, border, primary, danger, and success. Build a palette in the Color Palette Generator, then return here to check each foreground/background pair.
How Contrast Ratio Is Calculated
After sRGB channel linearization, relative luminance is L = 0.2126R + 0.7152G + 0.0722B. Contrast is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance. Thresholds use that unrounded value.
Using Contrast Colors in CSS
Copy CSS Variables from the tool for color, background-color, --foreground, and --background. If you build a wash in the CSS Gradient Generator, verify text against the actual surface color, not a nearby swatch.
Common Color Contrast Checker Use Cases
Body text, buttons, links, forms, dashboards, dark mode, errors, warnings, design-system tokens, focus indicators, and icons. Contrast is one check—not a full interface audit.
Color Contrast for ADA and Section 508 Workflows
WCAG is commonly used as the technical accessibility reference in U.S. work. Contrast is only one part of broader accessibility conformance. This tool does not make a website ADA compliant and is not legal advice.
Common Color Contrast Mistakes
- Checking only text and forgetting UI controls.
- Using 4.5:1 for every type of content without considering large text.
- Treating 3:1 as sufficient for normal body text.
- Ignoring AAA where stronger contrast is intentionally required.
- Relying on hue difference instead of luminance contrast.
- Using color alone for status.
- Forgetting focus indicators.
- Testing one state but not hover, focus, or selected states.
- Ignoring transparency.
- Assuming a passing ratio means the whole interface is accessible.
- Using APCA as if it were a WCAG 2.2 compliance result.
- Testing approximate colors instead of the actual CSS colors.
Frequently Asked Questions
What is a color contrast checker?
It compares a foreground color with a background color, calculates the WCAG contrast ratio, and checks AA, AAA, and relevant non-text thresholds.
What contrast ratio does WCAG require?
WCAG 2.2 AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1. Relevant non-text UI uses 3:1. Requirements depend on the applicable standard.
What is the WCAG AA contrast ratio?
AA (SC 1.4.3) is 4.5:1 for normal text and 3:1 for large text.
What is the WCAG AAA contrast ratio?
AAA (SC 1.4.6) is 7:1 for normal text and 4.5:1 for large text. AAA is not universally required.
What contrast ratio is required for large text?
Large text is 18 point or larger, or 14 point and bold. AA then needs 3:1 and AAA needs 4.5:1. This tool treats 24px regular or 18.66px bold as that CSS approximation.
What is non-text contrast?
WCAG 2.2 SC 1.4.11 requires 3:1 for visual information needed to identify controls, states, or meaningful graphics—not every decorative border.
Do buttons and input borders need contrast?
When the border or icon is how someone identifies the control, that visual information needs 3:1 against adjacent colors. Inactive or purely decorative chrome is treated separately.
Can I check HEX colors?
Yes. 3-, 4-, 6-, and 8-digit HEX values are accepted, with or without #.
Can I check RGB and HSL colors?
Yes. rgb(), rgba(), hsl(), and hsla() are parsed, including modern space-separated CSS notation.
Can I check transparent colors?
Yes. Alpha is composited onto the background—or a page color if the background is also transparent—before the ratio is calculated.
Does the checker support alpha?
Yes. #RRGGBBAA, rgba(), and hsla() are composited. An isolated translucent swatch does not have one universal ratio.
How do I fix a failing color combination?
Darken the foreground, lighten the background, or apply a suggested color that meets the selected target while keeping hue where possible.
Can the tool suggest a passing color?
Yes. It searches nearby lightness values and lists candidates with their ratios. It does not change your colors until you press Apply.
Can I check a whole color palette?
Yes. Paste up to 12 colors to build a pairwise matrix of ratios and best WCAG level.
Does color contrast matter for color blindness?
Hue differences can disappear under protanopia, deuteranopia, or tritanopia. The simulator is a preview. Status should not rely on color alone.
Does a passing contrast ratio guarantee accessibility?
No. Contrast is one technical check. Keyboard access, focus, structure, and other WCAG criteria still apply.
What is the difference between WCAG 2.1 and WCAG 2.2?
WCAG 2.2 is the current W3C Recommendation. Contrast SCs 1.4.3, 1.4.6, and 1.4.11 keep the same ratios. 2.2 adds other criteria such as focus and target size that this page does not certify.
Is APCA part of WCAG 2.2 compliance?
No. WCAG 2.2 still uses relative luminance. APCA is not the WCAG 2.2 pass/fail algorithm, and WCAG 3 is not a finished standard.
Is this tool an ADA compliance certificate?
No. It is a technical contrast check. WCAG is often used in U.S. accessibility work, but this page is not legal advice and does not certify ADA or Section 508 conformance.
Are my color values uploaded to the server?
No. Parsing and contrast math run in your browser. Share links store state in the URL hash only.
Can I copy CSS variables?
Yes. Copy CSS Variables writes --foreground and --background plus color and background-color declarations.
Can I share a color-pair result?
Yes. Copy Shareable Link uses a hash such as #fg=…&bg=…. Those states are not separate sitemap URLs.
Advertisement
Reviewed on 2026-09-20.