Skip to main content
UFOZoo

WCAG Contrast Checker: Check Color Accessibility Online

WCAG contrast checker online: verify color contrast ratios against AA and AAA standards, with live preview and suggestions.

Updated 2026-08-26

Related Tools

Color Converter: HEX, RGB, HSL, HSV, CMYK & Picker

Color Name Finder: Find Closest Named Color from HEX, RGB

Gradient Generator: Create CSS Linear & Radial Gradients

Favicon Generator: Website Icon ICO/PNG/SVG Maker Online

HEIC to JPG Converter: iPhone Photos to JPG Online

HEIC to PNG: Convert iPhone HEIC Photos with Transparency

Features

  • Real-time contrast ratio calculation using WCAG 2.1 sRGB luminance formula
  • WCAG AA and AAA compliance checking for normal text, large text, and UI components
  • Hex, RGB, and HSL color format input with live color picker
  • Instant pass/fail indicators for each WCAG compliance level
  • Live text preview showing how your color combination looks in practice
  • Adjustable preview text size to test normal and large text scenarios
  • Color swap button to quickly test foreground/background reversal
  • Suggested colors that meet WCAG AA/AAA standards when current combination fails
  • Supports alpha transparency for overlay and semi-transparent color testing

How to Use

  1. 1Enter or pick a foreground (text) color using the color picker or hex input.
  2. 2Enter or pick a background color using the color picker or hex input.
  3. 3View the real-time contrast ratio displayed prominently between the two colors.
  4. 4Check the WCAG compliance panel to see AA and AAA pass/fail status for normal text, large text, and UI components.
  5. 5Preview sample text in the preview area to see how readable your color combination is.
  6. 6If the combination fails, click suggested colors to find accessible alternatives.
  7. 7Use the swap button to reverse foreground and background colors and test the reverse combination.
  8. 8Adjust the preview text size slider to test both normal text (below 18pt) and large text (18pt and above) scenarios.
  9. 9Copy the contrast ratio value to use in documentation or accessibility reports.
  10. 10Test color combinations for websites, apps, presentations, and print materials to ensure accessibility compliance.

Frequently Asked Questions

What is WCAG contrast ratio?

WCAG contrast ratio is a mathematical calculation that measures the difference in luminance between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black and white). The formula uses the relative luminance of each color based on the sRGB color space. Higher ratios mean better readability for users with visual impairments. (See: W3C WCAG 2.2)

What are WCAG AA and AAA standards?

WCAG (Web Content Accessibility Guidelines) defines two conformance levels: AA is the minimum standard required by most accessibility laws, while AAA is the enhanced gold standard. For normal text, AA requires 4.5:1 contrast ratio and AAA requires 7:1. For large text (18pt+ or 14pt+ bold), AA requires 3:1 and AAA requires 4.5:1. UI components and graphical objects require 3:1 for AA. Some government and educational institutions require AAA compliance. (See: W3C WCAG 2.2)

What is considered large text?

WCAG defines large text as either: 1) 18pt (approximately 24px) or larger, or 2) 14pt (approximately 18.66px) or larger when bold. Large text has lower contrast requirements because bigger characters are easier to read even with less contrast. This tool lets you test both scenarios.

How is contrast ratio calculated?

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. Relative luminance is calculated by converting sRGB values to linear light values using gamma correction, then applying weighted coefficients (R: 0.2126, G: 0.7152, B: 0.0722).

Why is color contrast important for accessibility?

Approximately 300 million people worldwide have color vision deficiency, and over 2 billion have some form of vision impairment. Proper color contrast ensures that text and UI elements are readable by people with low vision, color blindness, age-related vision decline, and situational impairments (like bright sunlight). It also benefits users with normal vision by improving readability.

What does it mean when a color combination fails WCAG?

Failing WCAG means the contrast ratio between your foreground and background colors is too low for the text to be reliably read by people with visual impairments. The tool will show which specific levels (AA normal text, AA large text, AAA normal text, AAA large text) your combination fails. Use the suggested colors feature to find accessible alternatives.

Can I use this tool for mobile app design?

Yes! WCAG contrast requirements apply to all digital content including mobile apps, websites, emails, and documents. The same contrast ratios ensure readability across all devices. Test your mobile app's text colors, button colors, and UI element colors to ensure accessibility compliance.

How do I fix low contrast issues?

To improve contrast: 1) Darken the foreground color or lighten the background, 2) Lighten the foreground color or darken the background, 3) Use the suggested colors feature to find compliant alternatives, 4) Consider using solid colors instead of gradients or overlays, 5) For images, add a semi-transparent overlay to ensure text readability.

Why does my color combination fail the WCAG check?

Most failures come down to one of three causes: the ratio is below the threshold for the text size you are testing (4.5:1 for normal text and 3:1 for large text at AA), one of the colors carries alpha transparency, which lowers the effective contrast, or the pair was tested at the wrong text size. Check the ratio readout against the target for your size first, then darken the text, lighten the background, or use the suggested colors. Text over gradients or photos cannot be tested with two solid colors. Sample the actual pair and retest.

What color formats are supported?

The tool supports multiple color formats: Hex (e.g., #FF5733), RGB (e.g., rgb(255, 87, 51)), and HSL (e.g., hsl(14, 100%, 60%)). You can also use the visual color picker to select colors intuitively. All formats are converted internally to sRGB for accurate contrast calculation.

How accurate is this tool compared to professional software?

This tool uses the exact same WCAG 2.1 contrast formula as professional accessibility testing tools like axe, WAVE, and Colour Contrast Analyser. The calculations are mathematically identical. The only difference may be in color picker precision, but for practical purposes, the results are equivalent to industry-standard tools.

Is there a Chrome extension version of this contrast checker?

No, this is a web tool, so there is nothing to install and it works offline after the page loads, which covers most quick checks. If you need a browser-integrated workflow (checking colors while inspecting live pages), axe DevTools or the WAVE extension add contrast checking to Chrome's developer tools and can audit whole pages at once, while this page is the fastest way to test a single color pair.

Can I check the contrast of text on an image or photo?

Not directly: this tool compares two solid colors, and a photo contains thousands of them. Instead, sample the darkest text area and the busiest background region with an eyedropper (browser DevTools or any image editor), paste both values here, and test that pair. For text over photos, a common fix is a semi-transparent overlay behind the text. Test the overlay color against the text color here before applying it.

Can I use this together with Figma?

There is no plugin or live connection. This is a standalone page. Click a layer's fill in Figma to reveal its hex value, copy it here, and test the pair. If you want the checking inside Figma itself, community plugins like Contrast or Stark run the same WCAG math and compare two colors in place.

Another tool says this passes and yours says it fails. Who is right?

The WCAG formula is fixed, so pass/fail can only differ for borderline cases. The usual causes: one tool rounds the hex to 3-digit shorthand before computing, one blends alpha while the other ignores it, or one tests at large text (18pt or 14pt bold, 3:1) where the other uses normal text (4.5:1). If your ratio sits within 0.1 of the threshold, treat it as borderline. Bump the contrast and retest rather than arguing about tools.

I swapped the two colors (foreground/background) by mistake. Does the result change?

Mathematically, no: the contrast ratio is symmetric (contrast(fg, bg) equals contrast(bg, fg)) because the formula always divides the lighter luminance by the darker one. Swapping changes nothing; the tool even has a swap button to prove it. What does change with a swap is the design itself (light text on a dark background renders differently for readability and shadows), but the ratio is identical.