Hex, RGB, and color contrast: the math behind accessible color choices

WCAG contrast ratios aren't a subjective 'looks readable' judgment -- they're a calculated ratio with a specific formula and specific pass/fail thresholds.

Hex codes (#3366cc) and RGB values (51, 102, 204) describe the exact same color in two different notations -- hex is just RGB written in base-16 instead of base-10, two digits per channel. Converting between them is purely a base-conversion exercise, with no ambiguity or approximation involved.

Why 'looks readable' isn't good enough for accessibility

WCAG (Web Content Accessibility Guidelines) defines color contrast as a calculated ratio between the relative luminance of a foreground color and its background, not a subjective impression. The formula weighs each RGB channel differently because the human eye perceives green, red, and blue light as different levels of brightness at the same intensity -- green contributes the most to perceived luminance, blue the least.

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. A color pairing can look fine to one person's eyes and still fail these thresholds for someone with low vision or color vision deficiency -- which is exactly why the standard exists as a calculated number instead of a design opinion.

Common contrast mistakes

Light gray text on a white background is the single most common accessibility failure in web design -- it often looks clean and modern to full-vision designers while failing contrast requirements badly. Colored text on a colored background (a brand-color button with white text, for instance) needs to be checked directly, since brand colors are rarely chosen with contrast math in mind.

Checking your own colors

The color contrast checker calculates the exact WCAG ratio for any two colors and reports pass/fail against AA and AAA thresholds directly, so you don't have to estimate by eye. The hex-to-RGB converter and named color lookup are useful first steps when you have a color from a design tool in one format and need it in another to test.