Color Contrast Checker
Check text against its background for WCAG contrast, and get the nearest shade that passes when it does not.
Processed on your device — no upload
Large heading text
Body text at the size most of a page is set in. This is the sample that has to reach 4.5 to one, because it is the one people read for minutes at a time.
Small print, captions and labels.
Passes AA for body text at any size. AAA needs 7:1, which is worth reaching for long-form reading.
- AA — body textneeds 4.5:1
- AAA — body textneeds 7:1
- AA — large textneeds 3:1
- AAA — large textneeds 4.5:1
- Borders, icons, focus ringsneeds 3:1
The nearest shade that passes
The ratio is computed from WCAG relative luminance, which linearises each channel before weighting it. A simple brightness average — which is what a quick check usually does — gets saturated blues badly wrong, and blue on black is exactly where legibility fails first.
How to use it
- Enter the text and background colours.
- Read the ratio and what it passes.
- Take the suggested shade if it fails.
How it works
The ratio compares the relative luminance of the two colours: (lighter + 0.05) / (darker + 0.05). It runs from 1:1, two identical colours, to 21:1, pure black on pure white. WCAG sets 4.5:1 as the minimum for body text and 7:1 for the stricter AAA level.
Luminance is not brightness. Each channel is linearised before it is weighted, and green counts for far more than blue — 0.7152 against 0.0722. That is why a bright saturated blue on black is much harder to read than its hex value suggests, and why eyeballing it, or averaging the RGB values, gives the wrong answer for exactly the colours people get wrong.
"Large text" has a specific meaning. 18pt, or 14pt bold — roughly 24px and 18.5px. Only then does the 3:1 threshold apply. It does not cover a 16px heading in a semi-bold weight, which is what it gets used for.
The suggestion keeps your hue and saturation and moves lightness away from the background one step at a time until the ratio clears the bar. The result is recognisably the same colour rather than a generic dark grey, which is the difference between a fix a designer accepts and one they revert.
A worked example
The page opens on #767676 on white — 4.54:1. That is the single most useful number in accessible design: it is the lightest grey that passes AA on white, and anything lighter fails. The #999 that placeholder text and captions are so often set in comes to 2.85:1 and fails outright.
Try the case that catches everyone. Set the text to #0000ff and the background to #000000. Pure blue on black is 2.44:1 — a fail — while pure yellow on black is 19.56:1. Both are "a bright colour on black". The eye does not weight them the same way and neither does the formula.
Why this matters beyond compliance. Low contrast is not only a problem for people with low vision. It is a problem for anyone on a phone in sunlight, on a cheap monitor, on a screen at an angle, or simply over forty. Contrast is the accessibility fix with the widest reach and the lowest cost.
The threshold that gets forgotten. WCAG 1.4.11 requires 3:1 for the things that are not text: form field borders, icons, focus rings, chart lines. A form whose input borders are a faint grey fails even when every word on the page passes, and it is checked here as its own line.
To build a whole scale with contrast in mind rather than fix one pair, the palette generator reports which steps of the ramp are safe for text, and simulates colour vision deficiency.
Questions
Is this an a11y requirement?
Yes. WCAG asks for 4.5:1 on body text, and legislation in most countries references it. Below that, text stops being legible for a measurable number of readers.
What ratio do I actually need?
4.5:1 for body text to meet AA, 3:1 for text at 18pt or 14pt bold and above, and 3:1 for borders, icons and focus rings. AAA asks for 7:1 on body text.
Is AA enough?
It is the level almost all legislation references, so it is the practical requirement. AAA is worth reaching for long-form reading, but it constrains your palette hard.
What counts as large text?
18pt, or 14pt bold — about 24px and 18.5px. A 16px semi-bold heading does not qualify, which is the mistake this exemption usually hides.
Why does blue fail when it looks bright?
Because human vision is far more sensitive to green than to blue, and the formula weights them accordingly. Pure blue contributes very little luminance no matter how vivid it looks.
Does the suggested colour keep my brand?
It keeps your exact hue and saturation and only moves lightness, so it is the same colour, darker or lighter. It will not always be acceptable, but it is the smallest possible change.
Does contrast apply to disabled controls?
No — WCAG exempts disabled elements. That is a compliance exemption rather than a usability one, and a disabled button nobody can read is still a problem.
What about text over an image?
Check the lightest and darkest points the text crosses. If either fails, the text needs a scrim, a solid backing or a text shadow behind it.
Does this handle transparency?
Enter the colour as it renders. A semi-transparent foreground has to be composited against its actual backdrop first, because that is what the eye receives.
Related Web tools
Color Converter
HEX, RGB, HSL, HSV, CMYK
open$termiva palette --triadicColor Palette Generator
Harmonies and a full tint scale
open$termiva gradient --linearCSS Gradient Generator
Linear, radial and conic
open$termiva shadow --layers 2CSS Box Shadow Generator
Layered shadows, live preview
open