Light grey text on a white background might look elegant in a design mockup, but for a reader with low vision, or anyone using a phone in sunlight, it is simply invisible. WCAG contrast rules exist to settle these arguments with numbers: they define the minimum brightness difference between text and its background for content to count as readable. This checker computes the exact contrast ratio for any colour pair and gives clear pass or fail verdicts for normal text, large text, and the stricter AAA level, so you can fix palettes with evidence instead of opinions.
Quick Answer: Pick or type your text colour and background colour. The checker instantly shows the contrast ratio (like 4.5:1) and whether the pair passes WCAG AA and AAA for normal and large text.
How to Use the Color Contrast Checker
- Enter the text colour using the colour picker or by typing its hex value.
- Enter the background colour the same way.
- Read the contrast ratio and the four verdicts: AA normal, AA large, AAA normal and AAA large.
- If a verdict fails, adjust the darker colour darker or the lighter colour lighter until it passes.
- Use the Swap button to test the reverse pairing, which matters for hover states and buttons.
Key Features
- Exact WCAG 2.x contrast ratio computed from relative luminance, shown to two decimal places.
- Four verdict badges covering AA and AAA for both normal and large text sizes.
- Live preview sentence rendered in your exact colours at two sizes.
- Hex inputs alongside visual pickers, with automatic syncing between them.
- One-click swap for testing inverted states like buttons and hover styles.
Best Practices and Tips
- AA is the legal and practical standard for most websites: 4.5:1 for body text and 3:1 for large text (about 24px, or 19px bold).
- Check every state, not just the default: hover, focus, disabled and placeholder text all ship to real users.
- Darkening text is usually easier than lightening a brand background, and preserves the design’s identity.
- Test your palette’s worst pair, typically the lightest text on the lightest background, not the best pair.
Common Mistakes to Avoid
- Judging contrast by eye on a calibrated designer monitor, which flatters combinations that fail on ordinary screens.
- Assuming a passing logo or chart exempts body text: the rules differ, and text is judged strictly.
- Forgetting text over images and gradients: check against the lightest part of the image behind the text.
- Using colour as the only signal for errors or links, which contrast alone cannot fix for colour-blind readers.
Frequently Asked Questions
What is a contrast ratio, in plain terms?
It compares the relative brightness of two colours on a scale from 1:1 (identical, invisible) to 21:1 (black on white). The formula accounts for how human vision perceives brightness, so equal numerical steps in RGB do not produce equal ratios.
What counts as large text in WCAG?
Large text is at least 24 pixels (18 point), or about 19 pixels (14 point) if bold. Large text needs a lower ratio because thick letterforms stay legible at lower contrast: 3:1 for AA instead of 4.5:1.
Do these rules apply to logos and icons?
Logotypes and decorative elements are exempt, and essential icons are judged under the related non-text contrast guidance (3:1 against adjacent colours). Body text, links and form labels get no exemption, which is why this checker focuses on text pairs.
Why does my brand colour fail, and what can I do?
Saturated mid-tone brand colours often land between 2:1 and 3.5:1 on white. The usual fixes are a darker shade of the same hue for text, using the brand colour for backgrounds with white text instead, or reserving it for large headings only.
Which WCAG version does this use?
The ratio formula is the one from WCAG 2.0, unchanged through 2.1 and 2.2, so the numbers here match the standards that laws and audits reference. A future WCAG 3 method is in draft and not yet the compliance target.
Related Tools
