WCAG color contrast
Color contrast is not a visual impression, it is a number: WCAG defines an exact formula that turns two colors into a ratio from 1:1 to 21:1, and that ratio decides whether a piece of text passes or fails accessibility.
It clears AA for normal text (4.5:1 minimum) by the smallest possible margin, but fails AAA (7:1 minimum); this is the reference gray that shows up in accessibility examples precisely because it sits right at the edge.
It clears both AA and AAA for every text category, because pure blue has low luminance (the blue channel weight of 0.0722 is the smallest of the three) and contrasts well against a maximum-luminance background.
This is the formula's mathematical ceiling: luminance 0 against luminance 1 produces (1 + 0.05) / (0 + 0.05) = 21, no other color combination in the sRGB space can exceed that value.
AA is the conformance level adopted by most legislation and requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter (7:1 and 4.5:1) and is not always achievable for all content. For most sites, reaching AA already ensures good readability; aim for AAA on critical content.
At level AA, the minimum is 4.5:1 for normal text and 3:1 for large text; the stricter level AAA raises those minimums to 7:1 and 4.5:1 respectively. Most accessibility laws (such as Section 508 in the US) treat AA as the baseline requirement.
Large text is defined in typographic points, not directly in pixels: 18pt (equivalent to 24px) or larger at normal weight, or 14pt (equivalent to 18.66px) or larger in bold. Below those sizes, text falls into the normal category and needs the higher contrast ratio.
Because contrast is not a property of the text color alone, it is always a relationship between two luminances. A mid-gray can sit at 4.5:1 against pure white and drop below 3:1 against a light gray, so every combination needs to be recalculated, never assumed from a single color in isolation.
No: criterion 1.4.3 (which governs text) asks for 4.5:1 or 3:1 depending on size, while criterion 1.4.11 (Non-text Contrast) only requires 3:1 for form field borders, icons and other interface components that are not text, a lower floor because reading those elements is less demanding than reading a sentence.
Large sample text
This is a normal paragraph used to judge the readability of the chosen contrast.
Button / borderPasses level AAA for normal text
All luminance and contrast math runs in your browser. No color is sent to any server.