Color Contrast Checker

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

Color Contrast Checker tool

Loading...

Example

Input: Foreground #767676 text on background #FFFFFF

Result: 4.54:1 - AA Normal Text PASS, AA Large Text PASS, AAA Normal Text FAIL, AAA Large Text PASS

The ratio is (L1 + 0.05) / (L2 + 0.05) using the relative luminance of each color. #767676 is the lightest gray that still meets the 4.5:1 AA minimum for normal text on white.

Contrast Ratios for Common Color Pairs

Text on backgroundRatioAA normalAAA normal
#000000 on #FFFFFF21.00:1PassPass
#333333 on #FFFFFF12.63:1PassPass
#0000FF on #FFFFFF8.59:1PassPass
#595959 on #FFFFFF7.00:1PassPass
#008000 on #FFFFFF5.13:1PassFail
#767676 on #FFFFFF4.54:1PassFail
#777777 on #FFFFFF4.47:1FailFail
#FF0000 on #FFFFFF3.99:1FailFail
#FFFFFF on #C4653A3.98:1FailFail
#949494 on #FFFFFF3.03:1FailFail
#FFA500 on #FFFFFF1.97:1FailFail
#FFFFFF on #FFFF001.07:1FailFail

Computed with the checker, ratios cut to 2 decimals. Every pair from 3:1 up passes AA for large text.

  1. Enter a foreground (text) color as a hex code in the Foreground (Text) field.
  2. Enter a background color as a hex code in the Background field, or use Swap Colors to reverse the pair.
  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 use Copy Ratio to copy the contrast ratio for your documentation.

WCAG Contrast Ratios Explained

A contrast ratio compares how bright two colors are, from 1:1 (the same color) to 21:1 (black on white). WCAG asks for at least 4.5:1 for normal text and 3:1 for large text at level AA. This checker works out the ratio for your text and background colors and shows pass or fail for AA and AAA.

The ratio is based on relative luminance, which measures how much light a color gives off, weighted the way our eyes respond. Green counts most, then red, then blue. That is why pure blue text on white passes easily at 8.59:1, while pure red only reaches 3.99:1, even though both look strong.

WCAG has two levels for text. AA is the level most accessibility laws and policies refer to: 4.5:1 for normal text and 3:1 for large text. AAA is stricter, at 7:1 and 4.5:1. Large text means at least 24px regular, or about 18.66px bold. The tool also gives a quick rating: Excellent from 7:1, Good from 4.5:1, Fair from 3:1 and Poor below that.

The ratio is cut off at two decimals rather than rounded. A pair at 4.497:1 shows as 4.49:1 and fails, so you never see a pass the math does not support. Swap Colors flips the pair; the ratio stays the same, and the two previews show both versions. To see how your colors look with color blindness, try the Color Blindness Simulator.

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

Sources

Frequently Asked Questions

Normal text needs at least 4.5:1 against its background. Large text, meaning 24px regular or about 18.66px bold and up, needs at least 3:1. For AAA the limits rise to 7:1 and 4.5:1. These are hard minimums, so 4.49:1 fails AA for body text.
Each color is turned into relative luminance. The channels are linearized, then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The added 0.05 allows for screen glare and caps the top value at 21:1.
#767676 is the lightest gray that meets AA for normal text on white, at 4.54:1. One step lighter, #777777, drops to 4.47:1 and fails. For AAA you need #595959 or darker, which just reaches 7:1.
Yes. WCAG 2.1 added a 3:1 minimum for the parts of icons, form fields, focus outlines and other controls that people need to see to use a page. The checker labels its results for text, but the AA Large Text line uses the same 3:1 limit, so you can use it for these graphics.
Oranges and yellows are bright, so white text sits too close to them. White on #C4653A is 3.98:1, fine for large headings but not for body text. White on yellow is only 1.07:1. Darken the background, or use dark text on it instead.

Related Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

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