Question 1

What is WCAG contrast ratio?

Accepted Answer

WCAG (Web Content Accessibility Guidelines) defines contrast ratio as a measure of the difference in perceived luminance between two colors. The ratio ranges from 1:1 (same color) to 21:1 (black on white). WCAG requires minimum ratios of 4.5:1 for normal text and 3:1 for large text at AA level, and 7:1 for normal text and 4.5:1 for large text at AAA level.

Question 2

What counts as 'large text'?

Accepted Answer

According to WCAG, large text is defined as text that is at least 18 point (approximately 24px) or 14 point bold (approximately 19px). Larger text is easier to read, so the contrast requirements are slightly relaxed.

Question 3

Should I always aim for AAA compliance?

Accepted Answer

AAA compliance is the highest level of accessibility, but it's not required for most websites. WCAG recommends aiming for AA compliance as a minimum. Achieving AAA can be difficult with brand colors and may limit your design options. Focus on AA first, then improve where possible.

Question 4

How is contrast ratio calculated?

Accepted Answer

The contrast ratio is calculated using the relative luminance of each color. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. Relative luminance accounts for how the human eye perceives different wavelengths of light, weighting green most heavily, then red, then blue.

Color Contrast Checker

Test Color Combinations

Frequently Asked Questions

Other Useful Tools

Name Picker

JWT Decoder

Tip Calculator

Slug Generator