This tool helps you check colour contrast between text and background against the WCAG 2.1 standard. Pick your colours and see the contrast ratio and the pass or fail result instantly. If it fails, the tool suggests the closest text colour that passes AA.
Đang tải công cụ...
What is colour contrast and why does it matter?
Contrast is the difference in brightness between two colours, measured as a ratio from 1:1 (identical) to 21:1 (black on white). Light grey text on a white background looks elegant on a design screen but is very hard to read outdoors, for older people or for people with low vision. A readable website keeps visitors longer and lowers the bounce rate.
What ratio does WCAG require?
- AA, normal text: 4.5:1 or higher. This is the target for most websites.
- AA, large text: 3:1 or higher (24px and up, or 19px and up if bold).
- AAA, normal text: 7:1 or higher, the highest level.
- UI components and icons: 3:1 or higher, for example input borders and button icons.
How to use the tool
- Choose the text and background colours with the pickers or type a #RRGGBB code.
- See the preview and the automatically calculated contrast ratio.
- If AA fails, click Use this colour to apply the suggested colour.
- Copy a colour code from the shade palette for your design.
Frequently asked questions
What contrast ratio is enough?
For normal text aim for 4.5:1 or higher (AA level). Large text needs 3:1.
Does it work on dark backgrounds?
Yes. The formula uses relative luminance, so it works for both light and dark designs. Use the swap button to test quickly.
Does a logo need to meet contrast requirements?
Under WCAG, logos and brand wordmarks are exempt, but meeting the ratio still makes the brand easier to recognize.
Want a technically sound website from day one? See the comprehensive website design service, the comprehensive website SEO service, or contact Nam directly for free advice.
