Preset Combinations

Sample Heading

The quick brown fox jumps over the lazy dog. This is a sample of how your text will look with these color choices.

Link Text
21.00:1
134.5721

WCAG 2.1 Compliance

Normal Text(< 18px or < 14px bold)
AA ✓(4.5:1)
AAA ✓(7:1)
Large Text(≥ 18px or ≥ 14px bold)
AA ✓(3:1)
AAA ✓(4.5:1)
UI Components(Icons, borders, etc.)
AA ✓(3:1)
✓
AAA - ExcellentFor normal text(16px regular)

WCAG Accessibility Guidelines

Level AA (Minimum)

Normal text: 4.5:1 ratio. Large text (18px+ or 14px+ bold): 3:1 ratio. Required for most accessibility standards.

Level AAA (Enhanced)

Normal text: 7:1 ratio. Large text: 4.5:1 ratio. Provides better accessibility for users with vision impairments.

UI Components

Non-text elements like icons and borders need a minimum 3:1 ratio against adjacent colors.

Testing Tips

Test with real content, not just sample text. Consider users with color blindness and low vision.