Color Contrast Checker

Verify that your text and UI colors meet WCAG 2.1 accessibility requirements with this free contrast checker. Pick foreground and background colors using the color picker or enter hex values, and instantly see the contrast ratio alongside pass/fail results for AA and AAA compliance at normal text, large text, and UI component levels.

Live preview: See your color combination rendered at different text sizes so you can judge readability before committing to a palette.

All calculations run entirely in your browser using the standard sRGB luminance formula — no data is ever sent to a server.

Color contrast accessibility is one of the most impactful aspects of inclusive web design. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, and many more users experience temporary or situational vision impairment from bright sunlight, screen glare, or aging eyes. Ensuring sufficient contrast between text and background colors makes your content readable for everyone.

The WCAG 2.1 standard defines specific contrast ratio requirements at three compliance levels. The AA level is the minimum standard for most websites and legal accessibility requirements. The AAA level provides enhanced readability and is recommended for content that requires maximum legibility, such as medical information, legal documents, and educational materials.

Normal text (below 18 px or below 14 px bold) requires a 4.5:1 contrast ratio for AA compliance and 7:1 for AAA. Large text (18 px or larger bold, or 24 px or larger at any weight) requires 3:1 for AA and 4.5:1 for AAA. UI components and graphical objects (like icons and form borders) require at least 3:1 contrast against adjacent colors. These requirements exist because larger text is easier to read at lower contrast, and UI elements have contextual cues beyond color alone.

The contrast ratio is calculated using the relative luminance of the two colors in the sRGB color space. Luminance is computed by converting each RGB channel to a linear value, applying the standard formula, and comparing the lighter and darker values: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the darker. This produces a ratio from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).

Common contrast failures to watch for: Light gray text on white backgrounds (a frequent design trend that fails accessibility), low-opacity text overlays on images where the image content creates unpredictable contrast, colored text on colored backgrounds within brand color schemes, and placeholder text in form fields that is too faint to read.

Testing workflow: Start by checking your primary text color against your main background color. Then test secondary text, link colors, and muted text variants. Check form labels, placeholder text, error messages, and button text. For dark mode themes, re-test all color pairs since the contrast landscape changes entirely. Test hover and focus states as well, since color changes during interaction must also maintain sufficient contrast.

The live preview feature lets you see exactly how your color combination looks at different text sizes. This is particularly useful because the same contrast ratio can feel different depending on font size, weight, and rendering. A 4.5:1 ratio that looks acceptable on large text might feel difficult to read on small body text.