Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA compliance. Ensure your text is readable and accessible.

Loading...
1. Enter or pick a foreground (text) color using the hex input field or the visual color picker. 2. Enter or pick a background color using the second input field in the same way. 3. View the calculated contrast ratio and the pass/fail status for WCAG AA and AAA levels for both normal and large text sizes. 4. Preview a live sample of your text rendered on the background color to visually assess readability. 5. Adjust either color until the combination passes your target WCAG level, then copy both color values for use in your project.

About This Tool

The Color Contrast Checker evaluates the contrast ratio between a foreground text color and a background color, then reports whether the combination meets WCAG (Web Content Accessibility Guidelines) standards at AA and AAA levels. Accessible color contrast is a legal requirement in many jurisdictions and an ethical necessity for inclusive design.

WCAG 2.1 defines minimum contrast ratios for text readability. Normal text requires at least 4.5:1 for AA compliance and 7:1 for AAA. Large text (18px bold or 24px regular) has relaxed thresholds of 3:1 for AA and 4.5:1 for AAA. Non-text elements like icons and UI controls require a minimum of 3:1.

This tool calculates the relative luminance of both colors using the sRGB formula and computes the precise contrast ratio. It clearly indicates pass or fail status for each WCAG level and text size, along with suggestions if your combination falls short. Building accessible websites starts with choosing the right color pairs.

Formula / How It Works

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are relative luminance values. Luminance = 0.2126*R + 0.7152*G + 0.0722*B (linearized sRGB).

Frequently Asked Questions

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced readability (AAA level). Large text (18pt bold or 24pt regular) needs at least 3:1 for AA and 4.5:1 for AAA.
The contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Relative luminance accounts for human perception of brightness across red, green, and blue channels.
Large text is defined as 18 points (24 pixels) or larger for regular weight, or 14 points (approximately 18.66 pixels) or larger for bold weight. Large text has lower contrast requirements because its size makes it easier to read.
Yellow has high luminance, very close to white. The contrast ratio between white (#FFFFFF) and yellow (#FFFF00) is only about 1.07:1 - far below the 4.5:1 minimum. Both colors are perceived as very bright, making the text nearly invisible.
Yes. WCAG applies to images of text as well, though the guideline recommends using actual text instead of images of text whenever possible. Logos and decorative text are exempt from contrast requirements.

Related Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive color wheel with precision.

Color Tools

Color Palette Generator

Generate harmonious color palettes. Create complementary, analogous, triadic, and split-complementary schemes.

Color Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

Color Blindness Simulator

Simulate how colors appear to people with color vision deficiencies. Test protanopia, deuteranopia, and more.

Color Tools

Color Shade and Tint Generator

Generate shades and tints of any color. Create darker and lighter variations for complete color scales.

Color Tools