Color Contrast Examples

Color Contrast Examples and WCAG Compliance
Navigate this table row by row to compare color combinations. Each row shows a color pairing, visual example, contrast ratio, and WCAG compliance level. Use screen reader table navigation commands.
Color Combination Visual Example Contrast Ratio WCAG Compliance
Main Yellow on Black
(#FFCA38 on #000000)
Sample Text
15.6:1 ★ AAA Compliant
Excellent for all text sizes
Black on Main Yellow
(#000000 on #FFCA38)
Sample Text
15.6:1 ★ AAA Compliant
Excellent for all text sizes
Main Blue on White
(#1F3886 on #FFFFFF)
Sample Text
9.4:1 ★ AAA Compliant
Excellent for all text sizes
White on Main Blue
(#FFFFFF on #1F3886)
Sample Text
9.4:1 ★ AAA Compliant
Excellent for all text sizes
Main Blue on Main Yellow
(#1F3886 on #FFCA38)
Sample Text
8.2:1 ★ AAA Compliant
Excellent for all text sizes
Main Yellow on Main Blue
(#FFCA38 on #1F3886)
Sample Text
8.2:1 ★ AAA Compliant
Excellent for all text sizes
Accent Yellow on White
(#988863 on #FFFFFF)
Sample Text
4.5:1 ✓ AA Compliant
Good for all text sizes
White on Accent Yellow
(#FFFFFF on #988863)
Sample Text
4.5:1 ✓ AA Compliant
Good for all text sizes
Main Yellow on Accent Yellow
(#FFCA38 on #988863)
Sample Text
3.9:1 ✓ AA Compliant (Large Text Only)
Good for large text (18pt+)
Accent Yellow on Main Yellow
(#988863 on #FFCA38)
Sample Text
3.9:1 ✓ AA Compliant (Large Text Only)
Good for large text (18pt+)
Black on Main Blue
(#000000 on #1F3886)
Sample Text
2.2:1 ✗ Non-Compliant
Black text gets lost
Main Blue on Black
(#1F3886 on #000000)
Sample Text
2.2:1 ✗ Non-Compliant
Poor contrast - blue gets lost on black
Main Blue on Accent Yellow
(#1F3886 on #988863)
Sample Text
2.1:1 ✗ Non-Compliant
Poor contrast - avoid for text
Accent Yellow on Main Blue
(#988863 on #1F3886)
Sample Text
2.1:1 ✗ Non-Compliant
Poor contrast - avoid for text
Black on Accent Yellow
(#000000 on #988863)
Sample Text
2.0:1 ✗ Non-Compliant
Poor contrast - avoid for text
Accent Yellow on Black
(#988863 on #000000)
Sample Text
2.0:1 ✗ Non-Compliant
Poor contrast - avoid for text
Main Yellow on White
(#FFCA38 on #FFFFFF)
Sample Text
1.8:1 ✗ Non-Compliant
Poor contrast - avoid yellow text on white
White on Main Yellow
(#FFFFFF on #FFCA38)
Sample Text
1.8:1 ✗ Non-Compliant
White text disappears on yellow