Contrast Checker
Use this free contrast checker to test any text-and-background color pair against WCAG AA and AAA accessibility requirements before you ship a design. Enter two colors, and you instantly get the contrast ratio plus clear pass/fail results for normal and large text. It runs entirely in your browser — nothing is uploaded and your colors never leave your device.
Normal text — The quick brown fox jumps over the lazy dog.
Large text — The quick brown fox.
—
| Level | Normal text | Large text |
|---|---|---|
| AA | — | — |
| AAA | — | — |
Large text is 18pt (24px) regular or 14pt (18.5px) bold and larger. Ratios follow WCAG 2.x relative luminance (sRGB).
How to use the contrast checker
Enter a foreground (text) color and a background color in any common format — HEX, RGB, or HSL. The tool calculates the WCAG contrast ratio in real time and shows whether the pair passes AA and AAA for both normal and large text. Adjust either color until you hit the level you need, then copy the values into your design or stylesheet.
What is color contrast, and why does WCAG measure it?
Color contrast is the difference in perceived brightness between two colors — here, your text and the surface behind it. The Web Content Accessibility Guidelines (WCAG) express it as a ratio from 1:1 (no contrast) to 21:1 (black on white). Higher ratios are easier to read, especially for users with low vision or color vision deficiencies, and in real-world conditions like glare or dim screens.
WCAG contrast requirements
| Text | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text (under 18pt / 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ / 14pt+ bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
AA is the common legal and practical baseline (referenced by the ADA, Section 508, and most design systems). AAA is the enhanced target for body text where readability is critical.
Why contrast matters
Beyond compliance, contrast is one of the highest-leverage readability decisions you make. Low-contrast text — light gray on white is the classic offender — looks elegant in a mockup but fails real users on phones, in sunlight, and for anyone over 40. Checking contrast early prevents expensive rework and keeps your brand colors usable rather than just pretty.
Contrast for icons, form fields, and focus states
Most people only check body text, but WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast, Level AA) also requires a minimum 3:1 ratio for the visual information needed to identify user-interface components and the parts of graphics needed to understand content. A button label can pass while the input border or focus ring around it quietly fails. Run these element colours through the checker against whatever sits directly next to them.
| Interface element | Minimum ratio | Measured against |
|---|---|---|
| Keyboard focus indicator / outline | 3:1 | The background it sits on |
| Text input or text-area border | 3:1 | The page background beside it |
| Checkbox, radio, or toggle boundary | 3:1 | Adjacent colour |
| Icon that conveys meaning (e.g. a warning glyph) | 3:1 | Its own background |
| Chart, graph, or map segments | 3:1 | Neighbouring segments or background |
Inactive (disabled) components and purely decorative graphics are exempt from this rule, so a greyed-out button does not have to meet 3:1.
What a contrast ratio cannot tell you
A passing number is necessary but not sufficient. The WCAG ratio is calculated from luminance only, so it cannot flag every readability problem. Two colours with an adequate ratio against white can still be confused by someone with red-green colour vision deficiency if you rely on hue alone to carry meaning — always back colour up with text, icons, or patterns. Each interactive state (hover, focus, active) needs its own check, and text placed over a photo or gradient changes ratio pixel by pixel, so add a solid overlay or scrim rather than trusting a single sample.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For normal body text, you need at least 4.5:1 to pass AA and 7:1 to pass AAA. Large text (18pt or 14pt bold and up) needs 3:1 for AA and 4.5:1 for AAA. UI components and meaningful graphics need 3:1 against adjacent colors.
Is this contrast checker free and private?
Yes. It is completely free and runs entirely in your browser using client-side JavaScript. No colors, images, or data are sent to a server — nothing leaves your device.
Does large text really need less contrast?
Yes. Larger, heavier letterforms are easier to read at lower contrast, so WCAG allows 3:1 for large text versus 4.5:1 for normal text. “Large” means 18pt (24px) regular or 14pt (18.66px) bold and above.
What color formats can I use?
You can enter colors as HEX, RGB, or HSL. The tool converts between them and computes the WCAG relative luminance and contrast ratio for whatever pair you provide.
Does this tool detect colour blindness problems?
No. The contrast ratio is based on relative luminance, not hue, so it confirms whether text is bright enough to read but cannot tell you whether two colours look the same to someone with a colour vision deficiency. If meaning depends on colour — red for errors, green for success — add a label, icon, or shape so the information survives without colour.
What is APCA, and should I use it instead?
APCA (Accessible Perceptual Contrast Algorithm) is a newer, perception-based method being trialled for the draft WCAG 3.0 guidelines. It models how we actually read text more accurately than the 2.x ratio, but WCAG 3.0 is still a working draft and is not yet a legal or formal standard. For compliance today, keep using the WCAG 2.1/2.2 ratios this checker reports.
What is the highest contrast ratio possible?
21:1, which you get with pure black (#000000) on pure white (#FFFFFF) or the reverse. The scale runs from 1:1, where the two colours are identical and indistinguishable, up to that 21:1 maximum. You almost never need the ceiling — very high contrast can cause glare and halation for some readers — so comfortably clearing 4.5:1 for body text is usually the practical target.
Does disabled or placeholder text have to pass?
Disabled controls and the text inside them are exempt from the contrast rules, as are purely decorative text and brand logotypes. Placeholder text is a grey area: if it is only a hint it can be lighter, but if it acts as the field’s only visible label it should meet the 4.5:1 normal-text requirement, because a low-contrast placeholder that disappears on typing leaves users with no label.
Related design tools & guides
- Color Picker — grab and convert colors
- Color Shades Generator — build tints & shades
- Font Pairing Generator — find combinations that work
- Charcoal vs Black and other color comparisons