Color Selection

HEX Code
HEX Code

Accessibility Matters

This is a live preview of your color combination. Good contrast improves readability for everyone, including users with visual impairments.

Regular Text Example (16px)
Bold Text Example (18px)

Contrast Ratio

0.00
Checking...
AA Normal Text
WCAG 2.1 • Min Ratio 4.5:1
FAIL
AA Large Text
WCAG 2.1 • Min Ratio 3.0:1
FAIL
AAA Normal Text
WCAG 2.1 • Min Ratio 7.0:1
FAIL
AAA Large Text
WCAG 2.1 • Min Ratio 4.5:1
FAIL

Understanding WCAG Compliance

The Web Content Accessibility Guidelines (WCAG) are a series of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities.

What is Contrast Ratio?

It is a measure of the difference in perceived brightness between two colors. This range goes from 1:1 (white text on white background) to 21:1 (black text on white background).

Level AA vs Level AAA

  • Level AA

    The industry standard. Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

  • Level AAA

    The gold standard. Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.