UFOZoo

WCAG Contrast Checker — Check Color Accessibility Online

Check color contrast ratio for WCAG 2.1 accessibility compliance. Get AA/AAA results and preview readability. Browser-based, no upload needed.

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
  • ✓All calculations performed locally in browser — no data leaves your device

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.

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 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.

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.

What is the difference between AA and AAA compliance?

∨
AA is the minimum legal requirement in most countries for websites and digital content. AAA is the gold standard that provides the best readability for the widest range of users. While AA compliance is often sufficient for legal purposes, aiming for AAA ensures your content is accessible to as many people as possible. Some government and educational institutions require AAA 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.

Does this tool work offline?

∨
Yes! All contrast calculations are performed entirely in your browser using JavaScript. No data is sent to any server. The tool works offline after the initial page load, making it perfect for testing color combinations anywhere without internet access.

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.

Related Tools

Color Converter — Convert HEX, RGB, HSL, HSV & CMYK Online

Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Pick a color, see all converted values. Browser-based, no data uploaded.

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

Find the closest named color for any HEX or RGB value. Browse 140+ CSS color names with swatches. Browser-based color matcher, no upload needed.

Gradient Generator — Create CSS Linear & Radial Gradients

Create beautiful CSS gradients with a live preview. Linear and radial gradient generator with color stops and angle control. No upload, works in browser.