Color contrast checker

Color contrast checker: uses and practical guidance

Enter two opaque three- or six-digit HEX colors, with or without the hash. The ratio uses relative sRGB luminance and does not depend on the size of the on-screen sample. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. Large text is at least 24 CSS pixels, or approximately 18.67 pixels when bold. Thresholds are compared before rounding the displayed number. This check covers one uniform color pair: it does not evaluate transparency, photographs, gradients, interaction states or the complete accessibility of a page. If the actual background changes, repeat the test using the effective colors. Keep a record of both colors alongside the result.

Color contrast checker. Start with the example and observe the relationship between input and output before pasting a complete document. The example is deliberately small so that you can check it without another application. Then replace its data with a representative sample of your case and adjust the options. The main button performs the operation; loading the example only fills the controls. If you modify any input after calculating, the previous result is hidden so that you do not copy a version that no longer corresponds to the data. Run the operation again after every change. Clear restores the initial form values and discards the result on the page. Copy places the output text on the clipboard when the browser allows it. Download creates a file only when you explicitly request it; calculating does not start downloads. Keep a separate copy of the input if you need to repeat the work later, because this form is not a project archive and does not maintain an operation history.

Color contrast checker. Check a short sample whose result you can predict and another case containing the details that matter for your work. Inspect both the beginning and the end of the output; an apparently correct result may belong to an earlier input if you have saved several copies outside this page. If an error appears, reduce the sample until you find the offending data and review the stated limits. Do not remove information merely to dismiss a warning: first check whether the chosen operation represents what you need. Before using a download in another program, open it and inspect its characters, structure and values. The file contains the result rather than the form settings. If you need to explain how it was produced, retain the input and the options used as well.

A practical check before using the result

Color contrast checker. Check the contrast ratio between text and background against WCAG AA and AAA thresholds. Check the result before copying or downloading it.