WCAG Contrast Checker
Test any text and background color pair against WCAG 2.2 AA and AAA, see it live, and get the nearest passing color when it fails
Colors to Test
Enter a valid HEX, rgb() or hsl() color.
Enter a valid HEX, rgb() or hsl() color.
Readable at a glance?
The quick brown fox jumps over the lazy dog. Adjust the colors and size to see how this paragraph holds up.
One color per line (HEX, rgb() or hsl()). Up to 6 colors; every pair is checked.
- Normal text · AA (4.5:1) ✓
- Normal text · AAA (7:1) ✓
- Large text · AA (3:1) ✓
- Large text · AAA (4.5:1) ✓
- UI components & graphics · AA (3:1) ✓
Add at least 2 valid colors to compare
AAA ≥ 7:1 · AA ≥ 4.5:1 · AA Large ≥ 3:1 (large text only)
How to use this tool
- Enter the text color and the background color as HEX, rgb() or hsl(), or use the color pickers.
- Set the text size in px and tick Bold text if it applies, so the tool knows whether it counts as large.
- Read the contrast ratio and the Pass or Fail result for AA and AAA, normal and large text.
- If it fails, use Apply on the suggested color, or switch to Palette check to test up to 6 colors at once.
Worked example
Dark gray #333333 on white gives 12.63:1, which passes every level. Medium gray #777777 on white gives 4.47:1: the ratio is truncated, not rounded, so it fails the 4.5:1 AA threshold for normal text even though it looks close. The tool suggests #767676 (4.54:1) to pass AA, and #595959 (7.00:1) to pass AAA, keeping your hue and changing only lightness. Large text starts at 24 px regular or about 18.66 px bold and needs only 3:1 for AA. A passing ratio does not ensure readability for everyone, since font weight, size and eyesight also matter.
Methodology
This checker implements the contrast algorithm of WCAG 2.x (Success Criteria 1.4.3, 1.4.6 and 1.4.11), unchanged since WCAG 2.0 in 2008 and carried through 2.1 and 2.2. Ratios are truncated, never rounded, so 4.499:1 is shown as 4.49:1 and correctly fails. When a pair fails, the suggestion keeps your color's hue and saturation and searches only the lightness axis for the closest value that reaches the target.
Six everyday colors on white, then one red fixed
Ratios the checker shows for each text color on #FFFFFF.
| Text color | Ratio | Normal AA (4.5:1) | Large AA (3:1) |
|---|---|---|---|
| #0B5FFF | 5.12:1 | Pass | Pass |
| #008000 | 5.13:1 | Pass | Pass |
| #E53935 | 4.22:1 | Fail | Pass |
| #FF0000 | 3.99:1 | Fail | Pass |
| #808080 | 3.94:1 | Fail | Pass |
| #FFA500 | 1.97:1 | Fail | Fail |
Ratios are truncated, never rounded. Which column applies depends on size: text counts as large from 24 px regular or 18.66 px bold, and below that you read the Normal column. Orange #FFA500 fails every row at 1.97:1, so not even a UI border in that color is enough on white. Reds, oranges and mid-grays are the usual trouble, and a pair that fails for body text can still pass as large text or as a UI border.
The error red. Dana uses #E53935 for form errors set at 16 px. It scores 4.22:1, so it fails AA as normal text. The tool keeps her hue and moves only lightness: #E32C28 reaches 4.50:1 for AA, and #AF1A17 reaches 7.04:1 for AAA. She applies #E32C28 to the 16 px messages and keeps #E53935 for 24 px headings and input borders, where 3:1 is enough. It still has to be readable to you: a passing ratio is a floor, not a guarantee.
Accessibility & Color-Accuracy Essentials
Books and gear for designers and developers who care about readable, accurate color
Inclusive Design for Accessibility: practical guide to digital accessibility, UX, and inclusive web and app design
Practical guide by Dale Cruse and Denis Boudreau covering digital accessibility, UX, and inclusive web and app design.
Calibrite Photo Kit with Display Pro HL: monitor calibration colorimeter and ColorChecker Passport Photo 2
Display Pro HL colorimeter plus ColorChecker Passport Photo 2 for an accurate capture-to-edit color workflow: RAW files, custom camera profiles and white balance.
As an Amazon Associate we earn from qualifying purchases at no additional cost to you.
Frequently asked questions
Why does #777777 on white fail when it looks fine? ▼
WCAG measures relative luminance, not how a gray looks on your screen. #777777 on white is about 4.47:1, just under the 4.5:1 AA minimum for normal text. #767676 is the lightest neutral gray that passes AA on white (4.54:1). This near-miss is also why the tool truncates ratios instead of rounding them.
How does the tool decide whether my text counts as large? ▼
It uses the size and weight you enter: 24 px (18 pt) or more at regular weight, or 18.66 px (14 pt) or more in bold. Set the size and tick bold, and the matching rows are highlighted and the verdict follows that category.
Do placeholders, disabled buttons and logos have to pass? ▼
Inactive (disabled) interface components and logotypes are exempt from SC 1.4.3, but placeholder text is not: it must reach 4.5:1 like any other text. Icons and input borders that are needed to identify a control fall under the 3:1 non-text rule instead.
Can I test text over a gradient, a photo or a semi-transparent color? ▼
This tool compares two solid colors. For a semi-transparent color, blend it over the real background first and enter the result. For gradients and photos, test the text color against the lightest and the darkest spot behind it and use the worst result.
Should I aim for AA or AAA? ▼
AA is the level most accessibility rules that reference WCAG ask for, so it is the practical minimum. AAA is a stricter target that is not expected for every element on a site, but it is a sensible goal for long body text.
Does this tool use APCA or the WCAG 3 contrast model? ▼
No. APCA is a candidate model for WCAG 3, which is still a draft. This checker uses the WCAG 2.x ratio, the same formula that audits and regulations rely on today.