ClarityHow to use this tool
- Enter text color (#rrggbb), background color (#rrggbb).
- Select Update result to view the result.
- Check the method and assumptions below before using the result.
Input reference and sample values
Use the units and choices shown for each field. Sample values are provided for practice, not as recommendations.
| Input | Format and units | Sample |
|---|---|---|
| Text color (#RRGGBB) | Enter text using the format shown in the sample. | #2855ec |
| Background color (#RRGGBB) | Enter text using the format shown in the sample. | #ffffff |
Result for these sample inputs
Contrast ratio: 5.83:1 WCAG AA normal text: Pass WCAG AA large text: Pass WCAG AAA normal text: Fail
Processed locally. Review the output before using it.
Select Try the example in the form to load these values and calculate them again. This replaces the current form inputs. Compare the result with the method and worked explanation below.
The method, explained
Convert sRGB channels to linear values, calculate relative luminance, then divide (lighter + 0.05) by (darker + 0.05).
Black on white has a contrast ratio of 21:1.
What to keep in mind
Solid opaque colors only. Large text means at least 18 pt, or 14 pt bold. Contrast alone does not establish full accessibility.
Common questions
How does this tool handle my input?
Processing happens in your browser. Your pasted content is not uploaded, included in URLs or stored as a calculation history.
What input should I use?
Text color (#RRGGBB): use the example already shown, then replace it with your own content. Solid opaque colors only. Large text means at least 18 pt, or 14 pt bold. Contrast alone does not establish full accessibility.
Methodology maintained by ClarityKit. How these tools are built and checked.