Magic Numbers

Created by Sviatoslav Nytka from MagicFlux

This tool is inspired by USWDS, and Salesforce Lightning Design System, 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