Contrast & Colors
Ensure optimal readability for all users
WCAG EN 301 549 criteria
Text contrast
Bad example
Light gray text on white (2.2:1) - Fail
Ratio: 2.2:1Medium gray text on white (3.8:1) - Fail
Ratio: 3.8:1Yellow text on white (1.9:1) - Fail
Ratio: 1.9:1Orange on red (1.2:1) - Fail
Ratio: 1.2:1Dark gray on black background (2.5:1) - Fail
Ratio: 2.5:1Blue on dark background (1.8:1) - Fail
Ratio: 1.8:1Good example
Dark gray text on white (7.0:1) - AAA Pass
Ratio: 7.0:1Black text on white (21:1) - AAA Pass
Ratio: 21:1Dark blue text on white (5.9:1) - AA Pass
Ratio: 5.9:1White on dark blue (8.6:1) - AAA Pass
Ratio: 8.6:1White on black background (21:1) - AAA Pass
Ratio: 21:1Yellow on dark background (12.3:1) - AAA Pass
Ratio: 12.3:1Explanation: WCAG AA contrast ratio requires a minimum of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA level is stricter with 7:1 and 4.5:1.
Information by color
Bad example
Registration form
🔴 Red = Error, Green = Valid
Order status
Good example
Registration form
Order status
Explanation: Information should never rely solely on color. Always add additional visual indicators (icons, patterns, text).
Color blindness and accessibility
Bad example
Performance chart
Good example
Performance chart
Explanation: About 8% of men and 0.5% of women are colorblind. Red-green combinations are particularly problematic.
Accessible theme switcher
Bad example
Page content
This text changes color according to the theme.
Information card
Important information to read.
Good example
Page content
This text maintains good contrast in all themes.
Information card
Important information always readable.
Explanation: A theme switcher must maintain contrast ratios, preserve readability, and respect the user's system preferences.
Links - Underlining and identification
Bad example
Links based solely on color
Web accessibility is essential for creating inclusive sites. Learn more about accessibility can help you understand best practices. The WCAG guidelines provide a comprehensive framework for improving accessibility.
Visit our resources page to find tools and tutorials.
Good example
Links based solely on color
Web accessibility is essential for creating inclusive sites. Learn more about accessibility can help you understand best practices. The WCAG guidelines provide a comprehensive framework for improving accessibility.
Visit our resources page to find tools and tutorials.
Explanation: Links must be identifiable without relying solely on color. Underlining, pattern differences or other visual indicators are essential.