Basic Color Contrast and Font Size Legibility Checkerv1.0.0

Enter a foreground color and a background color as hexadecimal values to calculate the WCAG 2.1 contrast ratio between them. The checker applies the relative luminance formula defined in WCAG 2.1 and compares the resulting ratio against the four compliance thresholds: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). Large text is defined as 24 pixels or larger at normal weight, or 18.66 pixels (approximately 14pt) or larger at bold weight.

• Type a hex color code into the Foreground (Text) Color field or use the adjacent color picker to select one visually. The field accepts standard six-digit hex codes with a leading hash, such as #3A5F9C.
• Type or pick a color for the Background Color field in the same way.
• Set the Font Size (px) to the pixel size of the text you intend to evaluate. The default is 16 pixels, which matches the browser default for body text.
• Select a Font Weight of Normal (400) or Bold (700). Bold text at 18.66 pixels or above qualifies as large text under WCAG, which lowers the required contrast threshold.
• Click Check Contrast or wait for the automatic 500-millisecond debounce to trigger the calculation.
• Review the Contrast Ratio displayed in the results area. The ratio appears in the standard format (for example, 4.52:1) along with pass or fail indicators for each WCAG level and text size category.
• Click Swap Colors to reverse the foreground and background and recalculate without delay.
• Open Settings and enable Show step-by-step luminance calculations to see the sRGB channel linearization and relative luminance values for both colors, followed by the contrast ratio derivation.
• Click Reset to restore all fields to their defaults and clear saved state.

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 applying the gamma correction threshold: values at or below 0.04045 are divided by 12.92, while values above 0.04045 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 is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance.

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: Walk through each text element on a page, input its color pair and size, and record which elements 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: Swap 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.