Preview Text
Preview Text
Contrast Ratio
21:1
AA: Pass
AAA: Pass
WCAG AA
Minimum standard
4.5:1 required
WCAG AAA
Enhanced standard
7:1 required
✓
AA: 4.5:1 normal, 3:1 large
✓
AAA: 7:1 normal, 4.5:1 large
💡
Dark text on light backgrounds works best
Live Preview
H:
28px
P:
16px
This is What A Heading Looks Like
This is a paragraph of text to show how your color combination looks in practice.
Good contrast ensures everyone can read your content comfortably. Try adjusting the
heading and paragraph sizes above to see how different text sizes affect accessibility.
This is what the same size text looks like when it's bold.
Button
Outline
Large text (18pt/24px+) only needs 3:1 for AA, 4.5:1 for AAA