Colour Contrast Checker: Check Text and Background Contrast
A free tool for checking text and background contrast, with WCAG AA and AAA indicators, HEX, RGB and HSL controls, and typography previews.
About this resource
WhoCanUse helps designers and developers explore how a text-and-background color combination may appear to different people. Created by Corey Ginnivan, the tool combines a contrast ratio with visual previews. It is useful when choosing interface colors and explaining why a particular text treatment needs adjustment. Enter the background and text colors as HEX values or adjust their hue, saturation and lightness. Set the text size, toggle bold and inspect the resulting contrast ratio and WCAG grade. Both color controls remain available while you compare combinations, so changes can be assessed directly in the sample. The results include simulations of several forms of color-vision deficiency, as well as cataracts, glaucoma and low vision. Separate previews represent direct sunlight and night-shift display mode. These examples help reveal differences that a single contrast score can leave difficult to picture. For a practical check, take the actual text color, background, font size and weight from your design. Review a label or paragraph, adjust the pair and repeat for other interface states. The tool runs in the browser without an account or payment, making it convenient for quick checks during design reviews. Treat the simulations as illustrative approximations. The displayed population percentages are estimates for individual conditions and do not form a complete breakdown of users. A passing grade for a color pair does not establish accessibility of a whole interface; keyboard use, structure, alternative text and testing with people still require separate attention.
Usage and licensing
The browser tool is free to use. The official source repository carries the MIT License, which permits code use, modification and distribution subject to retaining its copyright and permission notices. The software is provided without warranty; its simulations are not an accessibility certification.
Check the creator’s current terms before using this resource.Similar resources
UX Pilot Gradient Generator – Gradients & Textured Backgrounds
A browser-based gradient studio with color, texture and motion controls, plus previews inside interface layouts.
Neumorphism.io: CSS shadow generator for Soft UI
A free generator for neumorphic surfaces, with color, shape and shadow controls and copyable CSS.