Color Contrast Checker
Check WCAG 2.2 contrast and find the nearest passing colour
Hex with alpha, rgb(), hsl(), name.
Contrast ratio
4.54:1
Passes AA for all text, AAA for large.
- AA normal text (4.5:1)Pass
- AA large text (3:1)Pass
- AAA normal text (7:1)Fail
- AAA large text (4.5:1)Pass
- AA graphics and UI components (3:1)Pass
Suggestions
Nearest means the smallest ΔE OK (distance in the OKLab colour space) among the 8-bit colours that reach the target. A grey is searched among greys first, so it stays a grey; only when no grey reaches the target are all colours searched.
Nearest passing text colour
Already passes this target. No change needed.
Nearest passing background colour
Already passes this target. No change needed.
Preview
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
UI component, drawn in the text colour
Samples: 16px regular, 24px regular, 14pt bold, and a UI component. The preview text is not saved.
A colour with alpha is blended over what lies behind it, the background over white and then the text over that; browsers round each channel to a whole 0-255 value in slightly different ways, so the ratio and every Pass or Fail use the lowest contrast any of those roundings gives.
Large text is 24px regular, or bold at about 18.67px (14pt) and up.
Runs entirely in your browser. Nothing you enter is sent to a server.
What the thresholds mean
WCAG 2.2 asks for a contrast ratio of 4.5:1 for normal text at level AA and 7:1 at level AAA. Large text needs 3:1 at AA and 4.5:1 at AAA; large means 24px regular or about 18.67px (14pt) bold and up. Success Criterion 1.4.11 asks 3:1 for the parts of a control or a graphic that a person needs to see. The ratio is shown cut off at two decimals, never rounded up, and each result compares the exact ratio with its threshold, so 4.4999:1 shows as 4.49:1 and fails AA for normal text.
How alpha is handled
A colour with alpha is blended over what lies behind it: the background over white, then the text over that. Browsers round each channel to a whole 0-255 value in slightly different ways, so the ratio and every result use the lowest contrast any of those roundings gives. Over a different backdrop than white, a translucent background would give a different ratio.
How the nearest passing colour is chosen
Among the 8-bit colours that reach the target against the other colour, the page picks the one closest to yours by ΔE OK, the distance in the OKLab colour space. For a translucent colour, closest is measured from the colour as it is painted, and one that paints as a grey counts as a grey. A grey is searched among greys first, so it stays a grey; only when no grey reaches the target are all colours searched. A suggestion is opaque. When no colour reaches the target, the page says so and shows the best ratio that can be reached.