Contrast Checker (WCAG)

Related tools

• Color Palette Generator
• CSS Gradient Generator
• Border Radius Generator
• CSS Shadow Generator

How it works

1. 1

   Pick a text color and background color

   Use the color pickers.

2. 2

   See the contrast ratio

   A live preview shows the actual result.

3. 3

   Check WCAG pass/fail

   AA and AAA thresholds, for both normal and large text.

FAQ

What contrast ratio do I need to pass WCAG AA?

4.5:1 for normal text, 3:1 for large text (18pt+, or 14pt+ bold).

What is the difference between AA and AAA?

AAA is a stricter standard (7:1 normal text, 4.5:1 large text) - AA is the more commonly required baseline for accessibility compliance.

Does this tool send my colors anywhere?

No - the calculation runs entirely in your browser.