b2KIT

WCAG Color Contrast Trainer

Practice identifying WCAG-compliant color contrast ratios with interactive exercises.

Large Text Preview (24px bold)

Normal text preview (16px). This is what body text would look like with these color combinations on your website or application.

Small text preview (14px). Ensure adequate contrast for readability.

Contrast Ratio

12.63:1

PASSAA Normal Text
PASSAA Large Text
PASSAAA Normal Text
PASSAAA Large Text

AA Normal: 4.5:1 minimum | AA Large: 3:1 minimum

AAA Normal: 7:1 minimum | AAA Large: 4.5:1 minimum

Large text: 18pt (24px) or 14pt (18.5px) bold

How to Use WCAG Color Contrast Trainer

  1. 1

    Start the training

    Begin a series of color contrast challenges.

  2. 2

    Judge the contrast

    Decide if each color pair passes WCAG AA or AAA standards.

  3. 3

    Learn from feedback

    See the actual contrast ratio and improve your judgment.

Related Tools

Periodic Table Quiz

Interactive periodic table - click elements, enter quiz mode, and guess elements from their properties. Gamified learning.

Periodic Table Interactive Reference

Explore the periodic table with element details, properties, and category filtering.

Binary / ASCII / Unicode Character Table

Browse and search ASCII, Unicode, and binary character codes with copy-to-clipboard.

HTML Semantic Structure Quiz

Test your knowledge of semantic HTML elements with quizzes and best-practice tips.

Accessibility Readability Checker

Check text readability and accessibility compliance with WCAG guidelines and scoring.

Typing Tutor

Structured typing lessons with finger placement guide. Track WPM improvement over time with localStorage persistence.