Color Contrast Checker
Black on white has a WCAG contrast ratio of 21.00:1. Grey #767676 on white is 4.54:1, the lightest grey that passes AA for normal text (4.5:1), and #777777 is 4.47:1, which fails.
How to use
- Type the text color and the background color as HEX codes such as #767676, or pick them with the color boxes. rgb(118, 118, 118) also works.
- Read the contrast ratio and the pass or fail result for AA and AAA, for normal text, large text and UI components.
- If a requirement fails, press one of the suggested colors. It keeps your hue and changes only the lightness, by the smallest amount that passes.
- Press Swap to try the same pair the other way round.
How it works
Each red, green and blue value (0 to 255) is divided by 255 and converted to linear light: c / 12.92 when c is 0.04045 or less, otherwise ((c + 0.055) / 1.055) raised to the power 2.4.
Relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B using those linear values. White is 1 and black is 0. This is the definition in WCAG 2.2.
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It runs from 1:1 (identical colors) to 21:1 (black on white).
Requirements are compared with the exact ratio, never a rounded one: 4.499:1 fails 4.5:1. The tool shows the ratio rounded down to two decimals so a failing pair is never displayed as passing.
To suggest a color, the tool keeps the hue and saturation of the text color and moves its lightness up or down in small steps until the ratio reaches the target, then picks the direction that changes the color least.
WCAG contrast requirements
Large text means 24 px or bigger, or 18.66 px (14 pt) or bigger when bold. Logos and purely decorative text are exempt.
| What | AA (minimum) | AAA (enhanced) | Success criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 and 1.4.6 |
| Large text | 3:1 | 4.5:1 | 1.4.3 and 1.4.6 |
| UI components and graphics | 3:1 | no AAA level | 1.4.11 |
Common pairs
Ratios are calculated by this tool and rounded down to two decimals.
| Text | Background | Ratio | Result |
|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | AAA |
| #595959 | #ffffff | 7.00:1 | AAA |
| #767676 | #ffffff | 4.54:1 | AA, the lightest grey that passes on white |
| #777777 | #ffffff | 4.47:1 | Fails AA for normal text |
| #ff0000 | #ffffff | 3.99:1 | Fails AA for normal text, passes for large |
Standards
The formula and thresholds come from the W3C Web Content Accessibility Guidelines.
| Document | Defines | Where |
|---|---|---|
| WCAG 2.2, Understanding SC 1.4.3 | Contrast (Minimum), 4.5:1 and 3:1 | https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html |
| WCAG 2.2, Understanding SC 1.4.6 | Contrast (Enhanced), 7:1 and 4.5:1 | https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html |
| WCAG 2.2, Understanding SC 1.4.11 | Non-text Contrast, 3:1 | https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html |
| WCAG 2.2, definition of relative luminance | The luminance and ratio formulas | https://www.w3.org/TR/WCAG22/#dfn-relative-luminance |
FAQ
What contrast ratio do I need?
For WCAG AA, 4.5:1 for normal text and 3:1 for large text and for UI parts such as input borders and icons. For AAA, 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text at 24 px (18 pt) or bigger, or bold text at about 18.66 px (14 pt) or bigger.
Why does the tool show 4.49 when other tools show 4.5?
WCAG forbids rounding up to meet a threshold, so a ratio of 4.499 does not pass. This tool rounds down for display. Some tools round to the nearest value and show a pair as passing when it does not.
Is a #777777 grey on white acceptable?
Not for normal text: it is 4.48:1, just under 4.5:1. #767676 is the lightest grey that passes on a white background. It is acceptable for large text, which needs 3:1.
Does the ratio account for color blindness?
No. The contrast ratio measures lightness difference only, which is what matters most for people with low vision and many types of color blindness. It does not check whether two hues, such as red and green, can be told apart, so do not use color as the only signal.
Does this work for transparent colors or text over images?
No. It compares two solid colors. For semi-transparent colors, first work out the blended color over its background. For text over a photo, check the lightest and darkest areas behind the text.