Contrast is not a matter of taste. WCAG compares the relative luminance of text and background, then expresses the result as a ratio from 1:1 to 21:1. A ratio of 1:1 means no difference; 21:1 is black on white. The color contrast checker accepts two hex colors, shows the ratio and reports three pass or fail badges. It is a quick check for a color pair, not a complete accessibility audit.
Part of the image and design guide. The tool checks text contrast only. It does not inspect icons, focus rings, charts, disabled controls or text placed over a photograph. Those need separate checks.
How the ratio is calculated
Each color is converted from hex to red, green and blue values. Every channel is divided by 255, linearized with a gamma correction, and combined into a relative luminance using the coefficients 0.2126, 0.7152 and 0.0722. The lighter luminance and the darker luminance are then inserted into (L1 + 0.05) / (L2 + 0.05). The order of the two colors does not matter because the formula always puts the lighter value on top.
| Text | Background | Ratio | What it means |
|---|---|---|---|
| #1a1a1a | #ffffff | 17.40:1 | Passes AAA for normal text |
| #595959 | #ffffff | 7.00:1 | Meets the AAA normal-text threshold exactly |
| #767676 | #ffffff | 4.54:1 | Passes AA normal text, fails AAA normal text |
| #999999 | #ffffff | 2.85:1 | Fails AA normal text and AA large text |
| #ff5733 | #ffffff | 3.15:1 | Passes AA large only, not AA normal |
| #c2410c | #ffffff | 5.18:1 | Passes AA normal text |
| #14b8a6 | #ffffff | 2.49:1 | Fails all three badges |
| #0f766e | #ffffff | 5.47:1 | Passes AA normal text |
| #1e3a5f | #f8fafc | 10.99:1 | Strong contrast without pure black or white |
| #334155 | #f8fafc | 9.90:1 | Passes AAA for normal text |
The exact numbers matter at the boundaries. A ratio of 4.50 passes AA normal text, while 4.49 does not. The page displays two decimal places but compares the unrounded ratio, so rounding can hide a value just below a threshold. A displayed 4.50 is close enough that you should darken or lighten the pair slightly instead of relying on the display.
The calculation assumes opaque colors. A hex value has no alpha channel, so a translucent overlay must be composited against its real background before it is checked. A 50 percent black overlay on white is not the same as #808080 in every rendering context; compute the resulting solid color first, then enter that color here.
The three badges and the missing fourth check
WCAG sets different thresholds for different text sizes and levels:
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
The tool shows AA normal at 4.5, AA large at 3 and AAA normal at 7. It does not show a separate AAA large badge. That is a real limitation, not a claim that AAA large does not exist. If you need AAA for large text, compare the ratio manually against 4.5.
Large text is generally at least 18 point regular or 14 point bold, which is about 24 pixels regular or 18.66 pixels bold. The tool does not know the font size, so the AA large badge is only a hint until you confirm the rendered size. A 16-pixel paragraph does not become large text because the badge says AA large passes.
The threshold also depends on what is being tested. Normal body copy needs the full 4.5 ratio at AA. Icons, borders and focus indicators are non-text elements with a different requirement, and the checker does not evaluate them. Placeholder text, error messages and link text inside a paragraph are text, so check them with their actual colors rather than assuming the surrounding body style covers them.
Reading a failed result
Start with the contrast ratio and identify which badge fails. A 3.15 ratio passes AA large but fails AA normal. That might be acceptable for a 24-pixel headline and unacceptable for a 16-pixel paragraph. The same color pair can be right for one role and wrong for another.
Do not automatically jump to pure black or pure white. The navy and off-white pair at 10.99:1 is easier on the eyes than 21:1 and still clears AAA for normal text. A gray such as #767676 is a common compromise at 4.54:1: it passes AA normal but fails AAA. A darker gray such as #595959 reaches 7.00:1 and clears AAA normal, but it may look heavier in a minimal interface.
For a brand color, change lightness before changing hue. Orange #ff5733 fails AA normal at 3.15:1, while a darker burnt orange such as #c2410c reaches 5.18:1 and passes. Teal #14b8a6 fails all three badges, while #0f766e reaches 5.47:1. The darker versions keep the hue family and give the text enough separation from white.
Test the actual pair, not the intended pair. A button may have a gradient, a hover overlay or a semi-transparent border that changes the effective background. A card may sit on an image. If the text lands on a photograph, sample the lightest and darkest areas or add a solid scrim; the checker can only evaluate two solid colors.
A short contrast workflow
- Enter the actual text color and background color as three- or six-digit hex values.
- Read the ratio and the three badges. Ignore the AA large badge until you know the rendered font size and weight.
- Identify the target: AA normal for body copy, AA large for confirmed large text, AAA normal for stricter body copy.
- Adjust one color at a time, usually by darkening the text or lightening the background, and recheck.
- Test hover, focus, visited, disabled and dark-mode variants separately.
- Check icons, borders and focus rings with a non-text contrast review after the text pair passes.
A useful habit is to record the ratio beside the design token. For example, body text on a page background might be 14.48:1, while secondary text on the same background might be 7.00:1. Naming the pair and its ratio makes later changes easier to review than a screenshot alone.
What the checker cannot tell you
It does not simulate color vision deficiency, measure perceived readability, inspect font weight or evaluate text over images. It does not save a palette, export a report or pick a color from the screen. The three-digit shorthand is expanded to six digits, so #fff and #ffffff produce the same result. Invalid hex input produces no numeric ratio and the preview falls back to a safe color.
Passing a ratio is necessary but not sufficient. A page can meet contrast thresholds and still be hard to read because of tiny type, tight spacing, long lines, motion or poor focus states. Use the checker as one gate in a broader accessibility review, not as a substitute for testing with real content and assistive technology.