WCAG Color Contrast Checker

New

Check if your text and background colors pass WCAG AA and AAA. Enter two colors as hex, rgb(), hsl() or a color name, or pick them, and instantly see the contrast ratio with pass or fail for normal text, large text and UI components. If a pair fails, the checker suggests the closest text and background colors that pass. See-through colors are supported.

Text color

Background color

Contrast ratio 4.47:1 Passes AA only for large text and UI components

WCAG	Use	Needs	Result
AA	Normal text	4.5:1	Fail
AA	Large text	3:1	Pass
AAA	Normal text	7:1	Fail
AAA	Large text	4.5:1	Fail
AA	UI components and graphics	3:1	Pass

Large text: 24px, or 18.66px bold

Normal text is anything smaller. This paragraph is 16px, the most common size for body text on the web, so it needs at least 4.5:1 to pass AA.

Button outline Icon

Closest colors that pass

Same hue and saturation, with only the lightness changed.

Text color for AA: #767676 (4.54:1)
Text color for AAA: #595959 (7:1)

WCAG contrast requirements

Level	Normal text	Large text	UI components and graphics
AA (the usual legal and industry standard)	4.5:1	3:1	3:1
AAA (enhanced)	7:1	4.5:1	—

Large text is at least 24px (18pt), or at least 18.66px (14pt) and bold.
UI components and graphics (success criterion 1.4.11) covers what users need to see to use the page: input borders, focus indicators, icons, and the parts of charts and diagrams that carry meaning.
The ratios are exact limits: 4.49:1 fails a 4.5:1 requirement. Ratios are shown rounded down, so a failing pair never displays as passing.
Logos, decorative images and disabled controls have no contrast requirement.

How the contrast ratio is calculated

WCAG compares the relative luminance (L) of the two colors: how bright each one looks, from 0 for black to 1 for white.

contrast ratio = (L1 + 0.05) / (L2 + 0.05)      L1 is the lighter color

L = 0.2126 × R + 0.7152 × G + 0.0722 × B         each channel converted to linear light

Ratios range from 1:1 (the same color) to 21:1 (black on white). Green counts most toward luminance and blue least, which is why pure blue text on black is hard to read even though both look saturated.

How to fix low contrast

Use the suggestions. The checker finds the closest text or background color that passes by changing only the lightness, so your brand hue stays the same.
Darken the text rather than the background on light designs: it usually needs a smaller change.
Watch gray text. Light grays such as #999999 on white (2.84:1) are the most common contrast failure; #767676 is the lightest gray that passes AA on white.
Check every state. Hover, focus, visited, placeholder and error colors need enough contrast too.
Check text on images against the lightest or darkest area behind it, or add an overlay.

Frequently asked questions

What contrast ratio do I need?

For WCAG AA, which most laws and policies require, use at least 4.5:1 for normal text and 3:1 for large text, icons and input borders. For AAA, use 7:1 for normal text and 4.5:1 for large text.

Does WCAG 2.2 change the contrast requirements?

No. WCAG 2.2 keeps the same contrast criteria as WCAG 2.0 and 2.1: 1.4.3 (minimum, AA), 1.4.6 (enhanced, AAA) and 1.4.11 (non-text contrast, AA).

How are see-through colors checked?

A see-through text color is blended with the background, and a see-through background with a white page, and the resulting solid colors are compared. This is what readers see on screen.

What is APCA?

APCA (Accessible Perceptual Contrast Algorithm) is a newer contrast method that takes font size and weight into account. It is being considered for a future WCAG 3 but is not part of WCAG 2.2, so legal requirements and audits still use the ratios this checker calculates.

Can I share a color pair?

Yes. Click Copy link to these colors, or build the link yourself: ?fg=767676&bg=ffffff. Hex codes can be written without the #.

CSS gradient generator — Create linear, radial, and conic gradients with a live preview.
CSS box shadow generator — Create layered box shadows with sliders and presets.
SVG to Base64 / CSS converter — Embed SVG icons in CSS, and recolor them with a mask.