About this tool
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (3:1 for large text). AAA requires 7:1 (4.5:1 for large text). Higher ratios mean better readability for people with low vision.
How to use the Contrast Checker
- Enter a text color and a background color as HEX codes.
- Read the live preview to see how the pair actually looks.
- Check the ratio and Pass/Fail badges for WCAG AA and AAA.
- Adjust one color and re-check until both colors you need pass.
Common use cases
- Verifying a brand's text and background colors meet accessibility requirements
- Checking a button's label color against its background before shipping a design
- Auditing an existing website's color pairs for an accessibility review
- Choosing a readable link color against a colored background
Worked example
Dark gray text (#333333) on a white background gives a contrast ratio of about 12.6:1 — comfortably passing both WCAG AA (4.5:1) and the stricter AAA (7:1) threshold for normal body text. Now try a popular but risky combination: medium gray (#999999) text on white — that drops to roughly 2.85:1, failing AA entirely even though it might look "readable enough" on a bright monitor in good lighting. This is exactly the kind of pairing that looks fine to a designer during development but fails an accessibility audit and creates real difficulty for users with low vision or when viewed on a dim screen outdoors.
Things to watch out for
Contrast requirements differ by text size: normal text needs 4.5:1 for AA, but large text (18pt+/24px+, or bold 14pt+/18.5px+) only needs 3:1, since larger glyphs remain legible at lower contrast. It's easy to check a heading at the wrong threshold — always confirm whether the text in question qualifies as "large" under the spec before deciding it passes. Also remember contrast is about the actual rendered colors, not the color you started with in a design tool — if a semi-transparent overlay sits on top of your background, the effective color the Contrast Checker needs is the final blended result, not either layer alone.
The formula behind the ratio
WCAG 2 defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one. Relative luminance runs from 0 for black to 1 for white. To get it, the checker converts each 0 to 255 channel to a 0 to 1 value, removes the sRGB gamma curve, and weights the channels by how bright they look to the eye: 0.2126 for red, 0.7152 for green and 0.0722 for blue. That is why the ratio runs from 1:1 (two identical colors) to 21:1 (black on white), and why green affects contrast far more than blue.
Gray text on white and on black
These ratios were computed with the same formula the tool uses. The first column is the usual search: the lightest gray you can put on a white page.
| Gray | On white #FFFFFF | On black #000000 |
|---|---|---|
| #333333 | 12.63:1 | 1.66:1 |
| #595959 | 7.00:1 | 3.00:1 |
| #666666 | 5.74:1 | 3.66:1 |
| #767676 | 4.54:1 | 4.62:1 |
| #777777 | 4.48:1 | 4.69:1 |
| #808080 | 3.95:1 | 5.32:1 |
| #949494 | 3.03:1 | 6.92:1 |
| #AAAAAA | 2.32:1 | 9.04:1 |
So #767676 is the lightest neutral gray that passes AA for body text on white, and #595959 is the lightest that clears the 7:1 AAA level. #949494 passes only the 3:1 large-text level.
Why a result can read 4.50:1 and still fail
WCAG says the computed value should not be rounded, so 4.499:1 doesn't meet 4.5:1. The display here rounds to two decimals, but the Pass and Fail badges use the unrounded value. Text #008580 on white, for example, shows 4.50:1 because its exact ratio is about 4.49995:1, and it correctly fails AA. When a pair sits right on the line, darken it slightly rather than argue with the rounding.
What the AA and AAA badges cover
The badges test the normal-text thresholds, 4.5:1 for AA and 7:1 for AAA. For large text, read the ratio against 3:1 (AA) and 4.5:1 (AAA) yourself. WCAG also has a separate 3:1 minimum for the parts of buttons, form fields, icons and focus indicators needed to see them (success criterion 1.4.11, non-text contrast). Text that is purely decorative, part of an inactive control, or part of a logo is exempt from the text rules. The checker takes 3- or 6-digit hex codes only; convert rgb() or hsl() values with the Color Converter first. For more background, see the WCAG color contrast guide.
Frequently asked questions
Normal-size text needs at least a 4.5:1 ratio to pass WCAG AA. Large text (18pt+/24px+, or bold 14pt+/18.5px+) only needs 3:1.
AAA is a stricter standard requiring 7:1 for normal text and 4.5:1 for large text. Most websites target AA as a practical accessibility baseline; AAA is recommended where possible but not always achievable with brand colors.
Darken the lighter color or lighten the darker one until the ratio clears the threshold — usually a small lightness adjustment in the Color Converter or Gradient Generator is enough without changing the hue noticeably.
For normal-size text on a pure white background, #767676 is the lightest neutral gray that passes, at about 4.54:1. One step lighter, #777777, drops to about 4.48:1 and fails. For the stricter AAA level, the lightest passing gray is #595959, at 7.00:1.
Each color is converted to relative luminance, a value from 0 for black to 1 for white that weights green most and blue least. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. The result runs from 1:1 for identical colors to 21:1 for black on white.
Not under the text rule. WCAG success criterion 1.4.11 asks for at least 3:1 between the parts of a control or graphic that people need to see, such as a button border, an input outline or an icon, and the colors next to them. Any text label on the button still follows the text thresholds.