Check the contrast ratio between a text color and background color against WCAG AA and AAA accessibility standards.
Google AdSense Banner
This area will contain advertisements after approval.
Google AdSense Banner
This area will contain advertisements after approval.
Contrast ratio is calculated from the relative luminance of both colors using the WCAG formula, producing a ratio from 1:1 (identical colors, no contrast) up to 21:1 (pure black on pure white, maximum contrast).
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or larger, or 14pt bold). WCAG AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA is the commonly required standard for most websites.
Pure black text (#000000) on a pure white background (#FFFFFF) gives the maximum possible ratio, 21:1, comfortably passing both AA and AAA at any text size. A mid-gray #767676 on white gives a ratio of about 4.54:1, which just barely passes WCAG AA for normal text (4.5:1 minimum) but falls short of AAA (7:1), illustrating how a seemingly reasonable gray can sit right at the edge of acceptability.
Only checking contrast for body text and forgetting about other essential elements like placeholder text, disabled buttons, or icons, these are just as subject to WCAG requirements when they convey information.
Assuming a color pair that looks fine visually automatically passes, light grays on white or pastel combinations often look acceptable on a good monitor but fail the 4.5:1 AA threshold, always check the actual ratio.
Checking contrast against the wrong background, if text sits on an image or a gradient, the ratio needs to be checked against the actual pixel color behind the text, not just the nominal background color of the container.
WCAG AA is the widely recommended minimum standard for web accessibility and is often a legal requirement in many jurisdictions. AAA is a stricter, optional standard for enhanced accessibility.
Yes, large text (18pt+/24px+, or 14pt/19px+ bold) has lower minimum contrast requirements than normal-sized text, since larger text is inherently easier to read at lower contrast.
Google AdSense Banner
This area will contain advertisements after approval.