🎨 Color Contrast Checker — WCAG AA/AAA

Complete Guide: Color Contrast Checker — WCAG AA & AAA Compliance

What Is Color Contrast and Why It Matters

Color contrast ratio is the mathematical relationship between the luminance of a foreground color (usually text) and a background color. It is expressed as a ratio from 1:1 (identical colors, zero contrast) to 21:1 (black on white, maximum contrast). The higher the ratio, the more readable the text is for people with low vision, color blindness, or anyone reading in challenging conditions like bright sunlight or a low-quality screen.

The Web Content Accessibility Guidelines (WCAG), published by the W3C, define the international standard for accessible contrast. WCAG 2.1 Level AA — the legal baseline in many countries including the EU, US (ADA), UK, and Australia — requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG 2.1 Level AAA, the enhanced standard, requires 7:1 for normal text and 4.5:1 for large text.

Why does this matter in practice? Approximately 300 million people worldwide have color vision deficiency. Around 246 million have low vision. Even people with typical vision struggle with low-contrast text when fatigued, on mobile screens in direct sunlight, or on older monitors. Poor contrast is the most common accessibility failure on the web — it affects not just screen reader users but a substantial portion of every website's audience.

Beyond ethics and law, there are business reasons: sites that fail accessibility audits face legal liability in regulated industries (healthcare, finance, government). Accessibility audits are a standard part of enterprise procurement. And good contrast simply looks more professional — muddy, hard-to-read interfaces signal poor quality craftsmanship regardless of the rest of the design.

How WCAG Contrast Ratio Is Calculated

The WCAG formula uses relative luminance — a perceptual measure of how bright a color appears to the human eye. It accounts for the fact that the eye is more sensitive to green than red, and more sensitive to red than blue. The formula first linearizes the sRGB channel values, then weights them: L = 0.2126 R + 0.7152 G + 0.0722 B. The contrast ratio between two colors with luminance L1 and L2 (where L1 is the lighter) is (L1 + 0.05) / (L2 + 0.05).

This means that choosing colors "by eye" is unreliable. Two colors that look perfectly readable on your calibrated design monitor might fail the mathematical threshold on a cheaper display. The only way to be certain is to measure — which is exactly what this tool does.

How to Use This Color Contrast Checker

1. Enter the foreground color (your text color) in the first input. You can type a hex code like #1a2b3c, an RGB value like rgb(26,43,60), or use the color picker to select visually.
2. Enter the background color in the second input. Same formats supported.
3. Read the contrast ratio displayed immediately — for example 7.23:1. The tool shows pass/fail badges for both WCAG AA and AAA at both normal and large text sizes (four results in total).
4. Preview the combination in the live preview panel, which shows sample text at both normal and large sizes against the chosen background.
5. Adjust the colors using the sliders or by typing new values until all required thresholds pass. The ratio updates in real time as you change values.

Understanding the Four WCAG Results

The checker shows four pass/fail results because the thresholds differ by text size and conformance level:

• AA Normal text — requires 4.5:1. Applies to body text, labels, navigation links, form field text at standard sizes (below 18pt / 24px).
• AA Large text — requires 3:1. Applies to text 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger. Also applies to logotypes and purely decorative text is exempt.
• AAA Normal text — requires 7:1. Required for the highest conformance level. Use this for body text in applications targeting users with significant visual impairments.
• AAA Large text — requires 4.5:1. The enhanced standard for large or bold text.

For most websites, achieving AA on all text is the practical goal. AAA is aspirational and not required by most legal standards, but targeting it for body copy is excellent practice and noticeably improves readability for everyone.

Practical Use Cases with Examples

Checking a design system token: Your design system defines --color-text-secondary: #767676 on --color-bg: #ffffff. Input both hex values — the tool immediately reports 4.48:1, which just barely fails AA for normal text (needs 4.5:1). Adjust #767676 to #757575 — 4.6:1, passes AA. A one-unit shift in a single channel fixed a compliance issue.

Auditing a button: Your primary CTA button uses white text on a brand blue of #4285f4. The tool reports 3.07:1 — passes for large text but fails for normal text. Since button labels are typically 14–16px, this fails AA. Darken the blue to #1a73e8 to achieve 4.56:1 and pass AA for all text sizes.

Dark mode palette: In dark mode, background is #121212 and your text is #e0e0e0. Tool reports 13.85:1 — well above AAA. You have room to use a slightly more muted text color to reduce eye strain without failing any threshold.

Placeholder text: Placeholder text in form inputs is commonly styled too light and fails WCAG. Check your placeholder color against the input background — WCAG requires the same ratios for placeholder text as for regular text when it conveys information.

Common Mistakes When Working With Color Contrast

• Relying on visual judgment alone: Human color perception is highly subjective and context-dependent. Colors that look readable on one screen fail on another. Always measure numerically.
• Forgetting hover and focus states: Interactive elements have multiple states. Your link text might pass at rest but fail in its :hover or :focus state — check all states separately.
• Ignoring text over images: The contrast requirement applies even when text is over a photo or gradient. Use a semi-transparent overlay to ensure a consistent measurable background, then check contrast against the overlay color.
• Confusing UI component contrast with text contrast: WCAG 1.4.11 (Non-text Contrast, Level AA) requires 3:1 for UI components like checkboxes, radio buttons, and focus indicators — separate from and in addition to the text contrast requirements.
• Using opacity instead of solid colors: A text color of rgba(0,0,0,0.6) on white is equivalent to approximately #666666 and has a ratio of about 5.74:1. Use the solid equivalent when checking.

Integrating Contrast Checking Into Your Workflow

For a thorough approach: check every text color during design handoff, add contrast ratio comments to your design system token documentation, and run automated accessibility audits (using tools like axe-core or Lighthouse) in your CI/CD pipeline to catch regressions. For color selection, use this checker alongside a Color Picker so you can visually choose starting colors and immediately verify their accessibility.

For developers maintaining CSS custom properties or Sass variables, the CSS Minifier and related CSS tools can help keep your color token files clean and well-organized.

Frequently Asked Questions

Does the WCAG contrast requirement apply to icons?
Yes, under WCAG 1.4.11 (Non-text Contrast), informational icons must meet a 3:1 ratio against their adjacent background. Purely decorative icons are exempt.

What about text that appears over a gradient background?
You must verify contrast at the point where the text is actually displayed — typically the lightest point of the gradient beneath the text. If the gradient varies significantly under the text, consider a text shadow or semi-transparent background to normalise the effective contrast.

Is WCAG 3.0 changing the contrast formula?
Yes, WCAG 3.0 (in development) introduces the APCA (Advanced Perceptual Contrast Algorithm), which is more accurate for modern display technologies. As of 2025, WCAG 2.1 AA remains the legal standard in most jurisdictions. This tool implements the WCAG 2.1 formula.

Does contrast matter for non-text elements like borders and dividers?
Only if they are required to understand the content or operate the interface. Decorative dividers and borders are exempt. The border of a required form field, which visually conveys the input boundary, must meet 3:1 under WCAG 1.4.11.