blue-60v on white, grades 60 and 0, difference 60: 6.7:1
gray-50 on white, grades 50 and 0, difference 50: 4.6:1
blue-40v on white, grades 40 and 0, difference 40: 3.2:1
white on blue-60v, difference 60: 6.7:1
The rule
The design system names every color with a family and a grade: gray-90, blue-60v, red-warm-50. The grade is the color's lightness on a scale where 0 is white and 100 is black, and the system tunes each color so that the grades mean the same thing across families. That tuning buys one promise, which the system calls magic numbers:
- A difference of 50 or more between two grades always gives at least 4.5:1, the ratio for normal text.
- A difference of 40 or more always gives at least 3:1, the ratio for large text and for interface parts such as borders and focus rings.
- A difference of 70 or more always gives at least 7:1, the enhanced ratio.
So a designer picking a text color on a background never opens a contrast checker. If the text is grade 60 and the background grade 5, the pair passes. If the difference is 40, it passes only for large text and controls. The grades are in the token names, so the check happens by reading them.
Why it belongs in a palette gallery
The Color Lab shows a palette as a matrix of every pair, because a palette is checked pair by pair and most pairs are never looked at. Magic numbers are the other way to solve the same problem: build the palette so that the pairs are predictable from the names, and the matrix is implied. It costs some freedom in choosing exact colors, which is why the system's colors look the way they do, and in return nobody ships a failing pair by accident.
The values above are measured with the same math as the lab; the guarantees come from the design system's own documentation. The palette is a work of the United States government and is in the public domain.