Wivrix

Developer

Colour Contrast Checker (WCAG)

Check whether text and background colours meet WCAG AA and AAA accessibility standards. See the contrast ratio live and get the nearest passing colour when it fails.

Contrast ratio
—
Drag the pickers — updates live

Need hex / HSL / OKLCH? Open the Color Converter.

Large heading text

Normal body text at 16 pixels — the size most of your content will actually be.

Developer / raw response

What is this tool?

Test foreground and background colours against WCAG AA and AAA contrast ratios.

How to Use

  1. Set foreground (text) and background colours.
  2. Read the calculated contrast ratio.
  3. Check AA and AAA rows for normal and large text.
  4. Adjust colours until the combination you need passes.

Frequently Asked Questions

What counts as large text?

WCAG treats 18pt+ regular or 14pt+ bold as large.

Do gradients pass?

Test the worst-case segment users will actually read.

Related tools

People who use this tool often need these too.

Color Converter

Convert between HEX, RGB, HSL and named colours.

 Developer

Color Palette Generator

Build harmonious colour schemes from any base colour.

 Developer

CSS Gradient & Shadow Generator

Build gradients and shadows visually, then copy the exact CSS.

 Developer

CSS Minifier & Beautifier

Minify CSS for production or expand it for editing.

 Developer

Other tools

There are more calculators, converters and editors on Wivrix. If something is missing, tell us.

Browse all tools Suggest a tool