⚔️ WCAG Color Contrast Checker

What is a WCAG Color Contrast Checker?

A WCAG color contrast checker is a tool that measures the contrast ratio between two colors and evaluates whether they meet the Web Content Accessibility Guidelines (WCAG) 2.1 standards. Contrast ratio is a numerical value that describes how easily one color can be distinguished from another. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black against pure white). Higher ratios mean text and UI elements are easier to read, especially for users with low vision or color vision deficiencies.

WCAG 2.1 defines specific contrast thresholds for different levels of compliance. Level AA is considered the minimum acceptable standard, requiring a 4.5:1 ratio for normal-sized text and 3:1 for large text (18pt or 14pt bold). Level AAA is the highest standard, requiring 7:1 for normal text and 4.5:1 for large text. Non-text UI components like buttons, form fields, and icons must meet a 3:1 ratio at Level AA. This tool checks all five of these criteria simultaneously, giving you a clear picture of where your color combination stands.

Accessible color contrast matters because roughly 1 in 12 men and 1 in 200 women worldwide have some form of color vision deficiency. Beyond that, environmental factors like screen glare, low brightness settings, and aging eyes all reduce the ability to perceive subtle color differences. Ensuring adequate contrast is one of the simplest and most impactful accessibility improvements you can make to any website or application. Many jurisdictions now require WCAG compliance by law, including the Americans with Disabilities Act (ADA), the European Accessibility Act, and Section 508 of the Rehabilitation Act.

How to Use This Tool

1. Set your foreground (text) color using the color picker or by typing a HEX value directly into the text input. The tool accepts standard 6-digit hex codes with or without the # prefix.
2. Set your background color in the same way. You can use the swap button between the two inputs to quickly reverse the foreground and background colors.
3. View the live preview area, which shows your text color on your background color at both normal and large text sizes. The contrast ratio appears in large text below the preview.
4. Check the WCAG compliance badges below the ratio. Each badge shows Pass or Fail for the five WCAG criteria: AA Normal, AA Large, AAA Normal, AAA Large, and AA UI Components.
5. If any criteria fail, the tool shows suggested alternative foreground colors that would pass. Click any suggestion to apply it instantly and see the updated results.
6. Use the common color pair presets to quickly test popular combinations like Black on White, Navy on White, or Dark Gray on Light Gray.

Key Features

• Real-Time Updates - The contrast ratio and all compliance badges update instantly as you adjust either color. No need to click a "check" button.
• Five WCAG Criteria - Checks AA Normal Text, AA Large Text, AAA Normal Text, AAA Large Text, and AA UI Components all at once, so you get a complete compliance picture.
• Color Suggestions - When your color pair fails a WCAG criterion, the tool suggests the closest foreground colors that would pass both AA and AAA standards, preserving the hue when possible.
• Live Preview - See exactly how your text looks on the background at both normal and large sizes, so you can judge readability visually alongside the numerical ratio.
• Color Format Display - Both foreground and background colors show their RGB and HSL values, making it easy to copy the exact values you need for CSS, design tools, or documentation.
• Common Presets - Quickly test popular color combinations with one click. Useful for comparing your design against well-known accessible and inaccessible pairings.

Frequently Asked Questions

What is the difference between WCAG AA and AAA?

WCAG AA is the minimum recommended standard for web accessibility. It requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA is a stricter, enhanced standard that requires 7:1 for normal text and 4.5:1 for large text. Most organizations aim for AA compliance as the baseline, with AAA as a goal for critical content. Meeting AAA across an entire site can be challenging, but it ensures the widest possible audience can read your content.

What counts as "large text" in WCAG?

WCAG defines large text as at least 18 points (24px) in regular weight, or at least 14 points (approximately 18.66px) in bold. This distinction exists because larger text is inherently easier to read, so it requires a lower contrast ratio to remain accessible. Headings, hero text, and navigation labels often qualify as large text, while body paragraphs and fine print typically do not.

How is the contrast ratio calculated?

The contrast ratio is calculated using the relative luminance of each color. First, each sRGB color channel is linearized: values at or below 0.04045 are divided by 12.92, while values above that threshold are transformed using the formula ((value + 0.055) / 1.055) raised to the power of 2.4. The relative luminance is then computed as L = 0.2126 * R + 0.7152 * G + 0.0722 * B. Finally, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. This produces a ratio between 1:1 and 21:1.

What does the AA UI Components criterion mean?

WCAG 2.1 Success Criterion 1.4.11 requires that visual information used to identify user interface components and their states has a contrast ratio of at least 3:1 against adjacent colors. This applies to elements like button borders, form field outlines, focus indicators, checkboxes, toggle switches, and custom icons. It does not apply to inactive (disabled) components or to situations where the appearance is determined entirely by the browser with no author customization.

Can I use this tool for print design?

WCAG standards were designed primarily for digital content, but the underlying principles of contrast and readability apply to print as well. While this tool uses the sRGB color model for its calculations (which is screen-based), the contrast ratios it provides are a useful guideline for print legibility. Keep in mind that printed colors may appear different due to paper stock, ink characteristics, and lighting conditions, so always verify your printed materials in addition to using digital tools.