Wyvek

Color Contrast Checker

Check color pairs against WCAG contrast levels.

Contrast ratio

14.68:1

AA normal textPass
AA large textPass
AAA normal textPass
AAA large textPass

Live preview

The quick brown fox jumps over the lazy dog.

Accessible colors make text easier to read.

Free WCAG color contrast checker

Enter a text color and a background color to calculate their exact contrast ratio and check them against WCAG AA and AAA requirements. The live preview shows both normal and large text, while the pass/fail grid makes it easy to see which accessibility levels the pair meets.

How to check color contrast

  1. Choose or type the foreground and background HEX colors.
  2. Review the ratio and the four WCAG pass/fail results.
  3. Swap the colors if needed; the ratio remains the same.
  4. Copy the generated CSS when you find an accessible combination.

Understanding WCAG contrast levels

A ratio of 1:1 means there is no luminance difference; black on white is 21:1, the maximum. For most body text, aim for at least 4.5:1. Large text may use 3:1 at level AA, while level AAA raises the normal-text target to 7:1. Contrast alone does not guarantee accessibility, so also test focus states, font sizes, keyboard navigation, and non-color cues.

Frequently asked questions

What contrast ratio does WCAG require?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Large text means at least 18pt, or 14pt when bold.

How is the contrast ratio calculated?

The checker converts each sRGB color to relative luminance and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. The result ranges from 1:1 to 21:1.

Does passing the checker guarantee accessibility?

No. Contrast is one important requirement, but accessible design also needs readable type, visible focus states, semantic structure, keyboard support, and information that is not conveyed by color alone.

Can I use three-digit HEX colors?

Yes. Values such as #fff and #369 are expanded automatically to their six-digit equivalents before the ratio is calculated.

Are my colors uploaded?

No. All calculations run locally in your browser. Wyvek does not upload or store the colors you test.

Color Converter Convert colors between HEX, RGB, and HSL. Color Palette Generator Generate color palettes and schemes. Meta Tag Generator Generate SEO & Open Graph meta tags.