Color Contrast Checker

What is a color contrast checker and why does it matter?

A color contrast checker measures the luminance difference between a text color and its background. It then compares the result with the WCAG thresholds. The output is a ratio from 1:1 to 21:1. At 1:1 both colors are identical; 21:1 is black text on a white page. This tool computes the ratio with the W3C formula and gives the AA and AAA verdict for your text size. When a pair fails, it also suggests the closest accessible shade.

Contrast is not only an issue for people with low vision. Think of someone reading a phone in sunlight, an older reader or a laptop on low brightness. All of them feel weak contrast. The problem is also widespread. The 2026 WebAIM Million report found text below the AA threshold on 83.9% of one million home pages.

In my web design projects I check every text and background pair this way before a palette goes live. For the wider picture, see my article on web accessibility and WCAG standards.

How does the WCAG contrast ratio formula work?

The calculation has four steps. First, you divide each color channel by 255 to get a value between 0 and 1. Next, you undo the gamma curve of screens. At 0.04045 or less, divide by 12.92; above it, raise ((c + 0.055) / 1.055) to the power of 2.4. Then you weight the channels by the eye's sensitivity. Green carries 0.7152, red 0.2126 and blue only 0.0722.

Finally, you add 0.05 to both luminance values and divide the lighter by the darker. That 0.05 stands for screen glare and ambient light. As a result, even pure black cannot push the ratio to infinity, and the ceiling stays at 21:1.

The weights matter in practice. The formula treats yellow and green as very bright, and blue and purple as dark. For example, pure blue #0000FF scores 8.59:1 on white. Pure yellow #FFFF00 reaches 19.55:1 on black but only 1.07:1 on white. To convert your codes between HEX, RGB and HSL, use the HTML color codes tool.

AA or AAA: which level should you aim for?

AA is the practical baseline for WCAG conformance. Regulations such as the European standard EN 301 549 and Section 508 in the United States build on this level. It asks for 4.5:1 for normal text and 3:1 for large text. AAA is stricter and asks for 7:1 and 4.5:1 for the same text. In short, AA means everyone can read it; AAA means people can read it for hours without strain.

The W3C does not recommend AAA as a general policy for entire sites. Some content simply cannot meet every AAA criterion. My own approach: AA across the whole site, and AAA as the goal for long body copy and form labels. Blog posts, contract text and product descriptions are where 7:1 really pays off.

The tool sums this up in a badge. Above the AAA threshold for your text size it says Passes AAA. Between the two it says Passes AA, and below AA it says Fails AA. The big number follows the same logic: green passes, amber only clears 3:1, red falls below 3:1. To check how easy the wording itself is to read, try the readability checker.

Which threshold applies to large text, buttons and icons?

In WCAG, large text means at least 18 point, or at least 14 point bold. One point equals 1.333 CSS pixels, so 18 point is 24px and 14 point is 18.66px. The W3C explanation page rounds the second value to roughly 18.5px. However, the tool uses the exact 18.66px limit. So a borderline heading only counts as large text when the math clearly supports it.

Elements other than text have their own criterion: 1.4.11 Non-text Contrast. It asks for at least 3:1 against adjacent colors.

• Form inputs: if only the border reveals the field, the border needs 3:1.
• Buttons: the fill or border that sets the button apart needs 3:1. The label inside still follows the text rule.
• Focus indicators: the outline that appears during keyboard navigation must not disappear into the background.
• Meaningful icons and charts: a print icon without a label or a line in a chart also needs 3:1.

Disabled controls, logos and brand names fall outside this requirement. Placeholder text, on the other hand, is not exempt: the W3C explicitly lists it under 1.4.3, so it needs 4.5:1.

Using a color contrast checker with transparent colors and text on images

Design systems often define text colors with transparency, such as #00000099. The color on screen is then a blend of text and background. The tool blends them with C = a × C text + (1 - a) × C background. Next, it rounds the result to the 8 bit color a screen can show and measures that real color. For example, 50% black on white turns into #808080 and scores 3.94:1.

If the background itself is transparent, the tool cannot know what lies underneath. It therefore assumes a white base and says so in a note on the panel. Testing a translucent card on a dark page? Enter the card's final on screen color as the background.

Text on photos and gradients needs more than one measurement. Grab the lightest and the darkest spot behind the text with your browser's eyedropper and test both. If either pair fails, add a dark translucent layer behind the text. Then enter that layer's on screen color and measure again.

How do you fix a color pair that fails?

When a pair fails, the tool does not darken the color at random. It keeps hue and saturation fixed and scans the HSL lightness in 0.5 point steps in both directions. Then it returns the closest color that clears the threshold. As a result, the suggestion stays in your brand's color family. Red stays red; it only gets darker or lighter.

Suggestions come in two groups: change the text, or change the background. The right choice depends on the design.

• On buttons and badges a darker fill usually works better. White text is already as light as it gets.
• In body copy keeping the background and darkening the text preserves the overall look of the page.
• On mid tone backgrounds such as #777777, no text color reaches AAA. The tool then shows Not reachable in this hue, a sign the background must change.

Do not leave approved colors as a one off fix. Instead, store them in your design system as named values such as text, secondary text and button background. I cover that in my article on design systems. For button color in context, see my guide to conversion focused web design.

Which accessibility laws turn contrast into a legal requirement?

In the European Union, the European Accessibility Act (Directive 2019/882) has applied since 28 June 2025. It covers many consumer services, including e-commerce. Companies usually show conformance through the harmonised standard EN 301 549. Its web chapter builds on the WCAG success criteria, contrast included. National laws such as the German BFSG carry the directive into each member state.

In the United States, the Revised Section 508 Standards incorporate WCAG 2.0 Level A and AA by reference. So 4.5:1 for normal text is already part of federal procurement. Private sites face a different mix of rules and court decisions. Even there, most accessibility audits use WCAG AA as the reference point.

For that reason I treat AA contrast as the floor for any commercial site. A button nobody can read costs sales first. Rules change over time, so check the current legal text for anything critical. To review the rest of your site as well, a UX audit is a good place to start.

What is APCA, and will it replace the WCAG 2 ratio?

APCA (Accessible Perceptual Contrast Algorithm) came up during the WCAG 3 work. It aims to match human perception more closely. Its result is not a ratio but an Lc value. The sign matters too. Positive means dark text on light; negative means light text on dark.

However, APCA is not part of any standard in force today, and WCAG 3 is still a working draft. That is why the tool shows Lc for reference only. Pass or fail always comes from the WCAG 2.2 ratio.

The two methods tend to disagree on mid tone backgrounds. For example, black text on #F97316 orange passes AAA in WCAG 2 with 7.49:1, while white text fails with 2.80:1. APCA, meanwhile, rates the white text higher: Lc -58.4 against Lc 50.9. In a pair like that, go by the WCAG result first. Then prefer a fix that satisfies both, such as larger text or a darker background.