Move between HEX, RGB, and HSL
HEX and RGB describe the red, green, and blue channels used by screens. HSL expresses the same color as hue, saturation, and lightness, which can be easier to adjust systematically. The formats describe color differently but can resolve to the same visible output.
Check text contrast before shipping
Contrast compares the relative luminance of the text and its background. Under WCAG 2.2, Level AA calls for a ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA calls for 7:1 and 4.5:1 respectively. Treat thresholds as a starting check, then review the real interface at its final size and weight.
Color should not carry meaning alone
Pair status colors with labels, icons, patterns, or position so the message remains clear for people with color vision differences. Test hover, focus, active, disabled, error, and success states in both light and dark themes, not just the resting component.