Color contrast checker (WCAG)
Pick a text color and a background color — the tool calculates the WCAG contrast ratio, shows whether the pair passes AA and AAA for normal and large text and for interface elements, and previews real text, a button and an icon.
.text {
color: #2563eb;
background-color: #ffffff;
}
/* contrast 5.17:1 — AA ✓ AAA ✗ */How to use it
- Choose the text color and the background color with the color picker, or type a HEX value such as
#2563ebor#fff. - Read the contrast ratio and the AA / AAA results: green means the pair meets the threshold, red means it does not.
- Look at the preview: normal text, large text, a button and an icon on your background. If the pair fails, click “Suggest” — the tool changes the lightness of the text color until it reaches
4.5:1. - Use “Swap” to check the reverse pair, then copy the ready
.textrule with a comment about the result.
How it works
How contrast is calculated
WCAG 2.x compares the relative luminance of two colors. Each sRGB channel is first converted to linear light, then the channels are weighted by how bright the eye perceives them. The ratio runs from 1:1 (the same color) to 21:1 (black on white).
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
ratio = (L1 + 0.05) / (L2 + 0.05) /* L1 is the lighter color */AA, AAA and the thresholds
Level AA requires 4.5:1 for normal text and 3:1 for large text (from 24px, or from 18.66px if bold). Level AAA raises this to 7:1 and 4.5:1. Interface components and graphics — input borders, icons, chart lines — need 3:1 under WCAG 1.4.11 Non-text Contrast. For most sites, AA is the realistic target.
WCAG 2.2, APCA and WCAG 3
WCAG 2.2 is the current W3C standard, and its contrast criteria (1.4.3, 1.4.6, 1.4.11) match WCAG 2.1. WCAG 3.0 is still a working draft, and the APCA algorithm discussed for it is not part of any published standard. Audits and legal requirements keep relying on the WCAG 2 contrast ratio, which is exactly what this tool calculates.
How to fix a failing pair
Darken the text or lighten the background (or the other way round on a dark theme). The “Suggest” button does it in HSL: it keeps the hue and saturation and moves the lightness to the nearest value that reaches 4.5:1. In modern CSS the L channel of oklch() changes lightness more evenly than HSL, which makes it a handy base for accessible palettes.
FAQ
What contrast ratio should body text have?
At least 4.5:1 for AA, or 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Leave extra margin for small or light-weight text.
What counts as large text?
Text of at least 18pt (24px) in regular weight, or at least 14pt (about 18.66px) in bold. Anything smaller is normal text.
Do logos, disabled buttons and placeholders have to pass?
Logotypes, purely decorative elements and inactive (disabled) components are exempt. Placeholder text is still text that people read, so it should meet 4.5:1 too.
Can I check text on a gradient, an image or a semi-transparent color?
The tool compares two solid colors. For a semi-transparent color, first work out the color you get after blending it with the background. For a gradient or a photo, test the area with the lowest contrast, or put a solid or darkened layer behind the text.
