Magic Numbers

Created by Sviatoslav Nytka from MagicFlux

This tool is inspired by USWDS, to help you create color combinations that meet accessibility standards.

System assigns each color a grade from 0 (white) to 100 (black).

The "magic number" is simply the difference between the grades of two colors.

Accessibility levels:

  • 40+: Meets WCAG 2.2 AA for large text (3+)
  • 50+: Meets WCAG 2.2 AA for standard text and AAA for large text (4.5+)
  • 70+: Meets WCAG 2.2 AAA for standard text (7+)
Grade Color Hex code Luminance Target range