Color Contrast Checker — WCAG AA/AAA Ratio and APCA
Check text and background colours against WCAG 2.x AA and AAA, see the APCA Lc value, and get the nearest colour that passes.
Large text, 24px (18pt) regular
Large bold text, 18.67px (14pt) bold
Normal body text at 16px. The quick brown fox jumps over the lazy dog. Long paragraphs need more contrast than headlines, because thin strokes at small sizes blur together.
Small print at 13px, the size of captions and footers.
Nearest passing colours
Only lightness changes (in OKLCH), so the hue stays the same. Apply one, or copy it.
#7676764.54:1#0606064.52:1#5959597.00:1Calculated in your browser. Nothing you enter is sent to us or stored. Browse all free tools.
Found a problem, or something that could be better? We read every message and we fix things quickly.
This free color contrast checker tells you whether text is readable on its background according to WCAG 2.x, the standard behind the ADA, the European Accessibility Act and most accessibility audits. Enter a text colour and a background colour, by picker, HEX code or the screen eyedropper, and it shows the contrast ratio with pass or fail for AA and AAA at normal and large text sizes and for UI components such as button borders and icons.
When a pair fails, the checker suggests the nearest text or background colour that passes, by adjusting lightness alone in OKLCH so your brand hue stays the same. It also shows the APCA Lc value, the newer method in the WCAG 3 working draft, which models how contrast is actually perceived and is better at judging dark mode and thin fonts. WCAG 3 is not a standard yet, so for compliance the WCAG 2.x ratio is the number that counts, and the page explains where the two disagree.
How to use
- Enter the text colour and the background colour: use the pickers, type HEX codes (#777 or #777777), or click the eye icon to sample any pixel on screen (Chrome and Edge).
- Read the contrast ratio and the five verdicts. Body text needs AA normal (4.5:1); headings of 24px, or 18.66px bold, need AA large (3:1).
- Check the preview for how the pair actually looks at body, large and caption sizes.
- If a check fails, apply a suggested colour from Nearest passing colours, which changes lightness only.
- Use Swap to test the reverse (for example a dark-mode version), then copy the result or the CSS.
Frequently asked questions
What contrast ratio does WCAG require?
WCAG 2.1 and 2.2 level AA require at least 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3), and 3:1 for user-interface components and meaningful graphics such as input borders, focus rings and icons (1.4.11). Level AAA raises text to 7:1 for normal and 4.5:1 for large text (1.4.6). Logos and purely decorative or disabled elements are exempt.
What counts as large text in WCAG?
At least 18 point regular or 14 point bold. In CSS pixels that is 24px regular or about 18.66px bold, because one point is 1.333 pixels. A 16px bold heading is not large text, and neither is 20px regular. Thin or decorative fonts can fall short in practice even at those sizes, which is one of the problems APCA is meant to address.
Is #777777 on white accessible?
Not for body text. #777777 on #ffffff has a contrast ratio of 4.48:1, just under the 4.5:1 AA threshold, so it fails AA for normal text and passes only for large text and UI components. WCAG does not allow rounding up, so 4.48 is a fail. The lightest grey that passes AA on white is #767676 (4.54:1); for AAA, #595959 (7.00:1).
What is APCA and should I use it instead of WCAG 2?
APCA (Accessible Perceptual Contrast Algorithm) is the contrast method proposed for WCAG 3. Instead of a ratio it gives a lightness contrast value, Lc, from about -108 to 106, where the sign shows polarity (negative means light text on a dark background). It accounts for the fact that the same ratio reads differently depending on polarity and how dark the colours are, which is why WCAG 2 overrates dark-on-dark pairs and underrates some white-on-colour ones. Use it to make better design decisions, but report WCAG 2.x for compliance: WCAG 3 is a working draft and its contrast method may still change.
How is the contrast ratio calculated?
Each colour's relative luminance is computed by converting its sRGB channels to linear light and weighting them 0.2126 red, 0.7152 green and 0.0722 blue, the sensitivity of the eye to each. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. It ranges from 1:1 (identical colours) to 21:1 (black on white). The 0.05 term models ambient light reflecting off the screen.
How do I fix a colour that fails contrast?
Change lightness, not hue. Darken the text or lighten the background (or the reverse in dark mode) until the ratio passes. The suggestions on this page do exactly that in the OKLCH colour space, so a failing brand blue becomes a darker blue rather than a different colour. If neither direction can reach the target, which happens when the other colour is a mid-tone, change the other colour instead: mid-grey backgrounds cannot reach 7:1 with any text colour.
WCAG 2.x contrast requirements at a glance
• Normal text, AA (1.4.3): 4.5:1. Applies to body copy, labels, links, placeholder text that conveys information, and text in images.
• Large text, AA (1.4.3): 3:1. Text at least 24px regular or 18.66px bold.
• UI components and graphics, AA (1.4.11): 3:1 against adjacent colours. Input borders, checkbox outlines, focus indicators, icons that carry meaning, chart lines.
• Normal text, AAA (1.4.6): 7:1. Large text, AAA: 4.5:1. Few sites meet AAA everywhere; it is worth aiming for in long-form reading and for older audiences.
• Exempt: logos and brand names, disabled controls, purely decorative elements, and text that is incidental (part of a photo, for example).
Two mistakes come up in almost every audit. Placeholder text in form fields is usually light grey and fails 4.5:1, and since it is often the only label, it counts. And brand-coloured buttons with white text often land between 3 and 4.5, passing for large text only, while the button label is 14 or 16px.
Where WCAG 2 and APCA disagree
The WCAG 2 formula treats contrast as symmetric and linear in luminance, which is not how vision works. Two consequences show up constantly in practice.
Dark mode: light grey text on a near-black background often passes WCAG 2 comfortably yet looks harsh or blurry, while some mid-dark pairs pass and are hard to read. APCA treats light-on-dark separately (a negative Lc) and is stricter at the dark end.
Saturated colours: white text on orange (#ff7a00) is about 2.6:1 under WCAG 2 and fails, and black text on the same orange passes, yet many readers find the white version just as readable. APCA scores these closer to perception.
APCA levels as a rule of thumb: Lc 90 is preferred for body text, Lc 75 is the minimum for body text, Lc 60 for other content text, Lc 45 for large headlines, Lc 30 for placeholder and disabled text, and Lc 15 for non-text elements such as dividers. The full guidance also depends on font weight and size. Treat it as a design aid alongside WCAG 2, not as a replacement for a compliance check.
Related free tools
- Color Palette Generator — Press the spacebar for a new palette, lock the colours you like, pick a harmony, or pull the palette out of a photo. Export to CSS, Tailwind, SCSS, JSON or PNG.
- Color Picker & Converter — Pick any color from anywhere on your screen, or convert instantly between HEX, RGB, and HSL.
- CSS Gradient Generator — Build linear, radial and conic gradients with draggable colour stops, an angle dial and presets. Copy the CSS or a Tailwind class.
- Box Shadow Generator — Design layered box-shadow and text-shadow effects with live preview, presets for elevation, neumorphism and glow, and copy the CSS.