Basic Color Contrast and Font Size Legibility Checker

A color contrast checker measures how far apart two colors sit in relative luminance and expresses that distance as a ratio, from 1:1 for identical colors to 21:1 for pure black against pure white. Enter a foreground color and a background color as six-digit hexadecimal codes with a leading hash, such as #3A5F9C, and the calculator applies the relative luminance formula defined in WCAG 2.1 to derive the contrast ratio between them.

Font size and weight decide which WCAG threshold applies, because larger, heavier text stays legible at lower contrast than small body copy. WCAG 2.1 classifies text as large starting at 24 pixels at normal (400) weight, or 18.66 pixels (approximately 14pt) at bold (700) weight; anything smaller counts as normal text and is held to the stricter threshold. A font size of 16 pixels, the browser default for body text, falls below the large-text cutoff at either weight.

WCAG 2.1 sets four compliance levels: AA normal text requires at least 4.5:1, AA large text requires at least 3:1, AAA normal text requires at least 7:1, and AAA large text requires at least 4.5:1. The result reports the ratio itself, such as 4.52:1, alongside a pass or fail flag for each of the four level-and-size combinations, since a pair that clears AA can still fail the stricter AAA thresholds. Reversing which color sits in the foreground and which sits in the background leaves the ratio unchanged, so the same check covers a light-on-dark theme and its dark-on-light inverse.

The relative luminance formula converts each sRGB channel (red, green, blue) from its 8-bit value to a linear value by dividing by 255, then applies a gamma correction: values at or below 0.04045 are divided by 12.92, while values above that threshold are raised to the power of 2.4 after adjusting by the formula ((channel + 0.055) / 1.055). The three linearized channels are weighted as L = 0.2126 * R + 0.7152 * G + 0.0722 * B. The contrast ratio itself is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two luminance values. Settings can display this derivation step by step, showing the linearized channel values and the relative luminance of both colors ahead of the final ratio.

Verifying color contrast ratios prevents readability failures that affect users with low vision, color deficiencies, or suboptimal display conditions. Applying WCAG thresholds during the design phase avoids costly remediation after launch.

• Interface Design: Check a proposed button label color (#FFFFFF) against a brand background (#1A73E8) at 14px bold to confirm AA compliance before handoff to development.
• Content Publishing: Verify that body text set at 16px normal weight meets AAA enhanced contrast when displayed on a light gray (#F5F5F5) background, ensuring comfortable reading across long articles.
• Accessibility Auditing: Record each text element's color pair and font size across a page, and note which fail AA or AAA thresholds, to produce a remediation report.
• Email Template Development: Test heading and paragraph colors against the email body background, accounting for the fact that email clients render fonts at varying sizes and weights.
• Data Visualization: Confirm that chart axis labels, legend text, and annotation overlays remain legible against the chart background color at their rendered font size.
• Dark Mode Validation: Reverse the foreground and background values to check that both light-on-dark and dark-on-light configurations of a theme pass the same WCAG level.
• Print Stylesheet Review: Input the ink color and paper white value to verify that printed text maintains a contrast ratio above 4.5:1 at the intended print font size.
• Signage and Physical Media: Convert physical sign colors to hex approximations and check legibility at the equivalent pixel size to ensure environmental readability for viewers at distance.