Why the same color has four different-looking representations#
Hex and RGB describe exactly the same information — red, green and blue intensity — just written differently: #3366ff and rgb(51, 102, 255) are the identical color, one in base-16, one in base-10. HSL and HSB (also called HSV) re-parameterize that same color around hue, and are usually easier for a human to reason about: "make it a bit darker" is a one-number change in HSL's lightness, but a three-number change in RGB.
HSL and HSB are close cousins that get confused for each other constantly. Both start with hue and saturation; the third value means something different in each — HSL's lightness runs from black through the pure hue to white, while HSB's brightness runs from black up to the pure hue and stops there. The same hue and saturation can produce a visibly different color under the two models once the third number moves.
What the contrast ratio actually measures#
WCAG's contrast ratio compares the relative luminance of two colors — how much light they reflect, not how they look — on a scale from 1:1 (identical) to 21:1 (pure black against pure white). It is a formula applied to the sRGB values, not a subjective judgment, which is exactly why it can be computed rather than eyeballed.
AA (the level most accessibility audits and legal requirements target) needs 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is stricter: 7:1 and 4.5:1 respectively. A color pair that looks fine to someone with typical vision can still fail AA outright — contrast deficiency is common enough that "looks fine to me" is not a reliable substitute for the number.
A pitfall worth knowing: contrast is not commutative in effect, but the ratio is#
The WCAG ratio itself is symmetric — swapping foreground and background gives the identical number, since it is just a ratio of two luminances. What is *not* symmetric is how a design reads: light text on a dark background and dark text on a light background at the same ratio can feel different to read for long stretches, even though they pass the same numeric threshold. The ratio tells you pass or fail; it does not replace actually looking at the result.