UI & Accessibility Utilities

WCAG Color Contrast Checker

Audit foreground and background colors for readability and WCAG compliance. Find accessible shades and calculate relative luminance.

Front-end developers, product designers, and accessibility auditors must verify that text contrast is sufficient for visually impaired users. This local calculator analyzes color codes against WCAG 2.1 success criteria in real-time. When to use it: When auditing digital design palettes, building theme styles, or resolving Lighthouse contrast warnings. What it solves: Prevents unreadable site menus, inaccessible buttons, and compliance penalties. Why it matters: Low-contrast text is the most common accessibility issue on the modern web, directly hurting user experience and search index scores.

Select Colors

Text Color (Foreground)

Background Color

Live Render Preview

Normal Text (16px / Normal Weight)

The quick brown fox jumps over the lazy dog.

Large Text (24px / Bold Weight)

Heading Example

UI Components & Icons

🔍

Contrast Ratio

4.57:1

Calculating...

WCAG 2.1 Audit Results

Normal Text (WCAG AA - 4.5:1) Checking

Normal Text (WCAG AAA - 7.0:1) Checking

Large Text (WCAG AA - 3.0:1) Checking

Large Text (WCAG AAA - 4.5:1) Checking

UI Elements & Graphics (3.0:1) Checking

Accessible Color Suggestion

Foreground color tweaked slightly to satisfy the 4.5:1 ratio requirement.

#4F46E5 Ratio: 4.5:1

How Contrast Ratios Are Calculated

This validator computes color differences based on the relative luminance formulas described in the WCAG 2.1 guidelines.

Luminance is calculated using the sRGB model. First, raw 8-bit hex coordinates are scaled to values between 0.0 and 1.0. Next, color components are linearized: if a value is less than or equal to 0.03928, it is divided by 12.92; otherwise, it is adjusted using the formula ((val + 0.055) / 1.055) ^ 2.4. The total relative luminance is then obtained by weighting these linear channels: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

Before & After Contrast Correction Examples

❌ Before (Poor accessibility contrast)

Using light gray text on a white background yields a low contrast ratio that fails search engine checks.

Foreground: #B0B0B0 (Light Gray)
Background: #FFFFFF (White)
Calculated Ratio: 1.95:1
Audit Status: FAIL (Normal & Large Text)

✅ After (Accessible contrast correction)

Darkening the text color improves relative luminance difference to meet WCAG AA requirements.

Foreground: #595959 (Dark Gray)
Background: #FFFFFF (White)
Calculated Ratio: 4.56:1
Audit Status: PASS (AA compliance level)

Industry Use Cases

Developer Workflows	SEO Strategies	Operations & Teams
Audit UI element states (hovers, alerts, input borders) for accessible contrast.	Optimize page templates to resolve Lighthouse mobile accessibility flags.	Enforce WCAG design systems standards during mock reviews.
Verify text accessibility across CSS variables and dark-mode themes.	Validate user-generated content colors to ensure platform readability.	Compile accessible styling guidelines for team reference.

Common Color Contrast Mistakes

Assuming High Contrast Based on Color Differences

Colors like bright red and bright blue look very different to color-normal eyes, but they have very similar relative luminance values. Combining them yields low contrast that is unreadable for colorblind users.

Ignoring Contrast on Hover States

A link may meet contrast guidelines in its default state, but transition to an inaccessible color on hover or focus, creating issues for keyboard-navigated readers.

Accessibility Best Practices

Target AA as Minimum: Ensure all text on your site reaches at least the 4.5:1 ratio (AA) for normal text and 3:1 for large text.
Audit Form Borders: Validate that input outline borders maintain a 3:1 contrast ratio to keep them visible for all users.
Provide Dark Themes: Let users toggle themes if your primary layout relies on bright backdrops.
Do Not Rely on Color Alone: Provide underlined links, icon states, or text cues rather than using color changes alone to convey meaning.

Frequently Asked Questions

What is the WCAG 2.1 contrast ratio requirement for normal text?

Under WCAG 2.1 guidelines, normal text (defined as text smaller than 18pt or 14pt bold, typically below 24px) requires a minimum contrast ratio of 4.5:1 to pass AA compliance. To meet the stricter AAA compliance tier, normal text must satisfy a contrast ratio of at least 7:1 against its background color to accommodate users with low vision.

What qualifies as "large text" under accessibility standards?

Large text is defined under WCAG standards as text that is 18pt (approximately 24px) or larger, or 14pt (approximately 18.67px) and bolded. Because larger font sizes are easier to read at lower contrasts, the requirements are relaxed: a contrast ratio of 3:1 is required to pass AA, and a ratio of 4.5:1 is required to pass AAA.

How is the color contrast ratio calculated mathematically?

Contrast is measured based on relative luminance (L), which ranges from 0 (perfect black) to 1 (perfect white). The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The relative luminance of an sRGB color is computed by applying a gamma correction formula to the red, green, and blue values.

Do user interface components and borders require contrast audits?

Yes, WCAG 2.1 introduced Success Criterion 1.4.11, which requires a minimum contrast ratio of 3:1 for non-text content. This applies to active user interface components (such as form field borders, buttons, and custom controls) and graphical objects (like icons and chart segments) critical to understanding the page content.

How does the color contrast checker suggest alternative colors?

The browser-side script calculates the relative luminance difference between your selected foreground and background colors. If the ratio fails target thresholds, the tool runs a heuristic step-loop: it incrementally increases or decreases the lightness of the foreground color (moving it toward black or white) until it identifies the closest hexadecimal shade that satisfies the 4.5:1 ratio.

Does text inside logos or decorative elements require contrast checking?

No, text that is part of an inactive user interface component, pure decoration, or part of a picture (such as a word inside a logo or brand graphic) is exempt from WCAG contrast requirements. However, it remains a best practice to ensure logo typography is reasonably readable to support general branding visibility.

Why does Google Lighthouse flag color contrast issues on my page?

Google Lighthouse uses the Axe core accessibility engine to scan the rendered DOM. It detects text elements where the calculated contrast ratio against the parent background color falls below the 4.5:1 AA standard. Correcting these contrast flags directly improves your Lighthouse accessibility audit scores and search engine usability ratings.