pixel / color
Color is not decoration.
It is the fastest signal in your interface. Faster than text. Faster than shape. Which means when you get it wrong, you get it wrong at maximum speed.
The palette
Click any swatch to set as foreground color below.
Contrast checker
#0a0a0a
#f9f9f9
The quick brown fox.
Body text at this size must pass AA. If you are reading this without effort, the contrast is working. If you are squinting, it is not.
Caption text is the hardest to get right. Small size, same contrast requirement.
18.80
contrast ratio
AAA
Enhanced. Readable by everyone.
Requirements
Normal text: 4.5:1
Large text: 3:1
Enhanced: 7:1
Color sins
The rule: If you need more than three colors to explain your interface, your interface is not explained. It is illustrated.