Contrast Checker
Details & definitions
- Great!
- Contrast of 7:1 or higher follows WCAG 2.0 Enhanced (AAA) guideline.
- Good.
- Contrast of 4.5:1 or higher follows WCAG 2.0 Enhanced (AAA) guideline for large text and Minimum (AA) guideline for other text.
- Acceptable for large text.
- Contrast of 3:1 or higher follows WCAG 2.0 Minimum (AA) guideline for large text.
- Poor.
- Contrast below 3:1. Acceptable only for incidental text or text within a logo.
- Large text
- Defined as
…at least 18 point or 14 point bold…
; for typical defaults: 12pt = 16px, 14pt = 19.2px and 18pt = 24px.
Sample
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Ut vitae odio sed augue venenatis ullamcorper sit amet eu diam. Proin turpis dui, dapibus nec arcu ut, rutrum venenatis leo. Integer non leo ac leo tempor suscipit vitae at diam. Morbi feugiat mattis egestas. Fusce sit amet bibendum justo, in volutpat dui. Aenean quis massa vitae ante lobortis auctor. Aliquam erat volutpat. Curabitur tempor dui tortor, in dictum arcu tristique non. Nullam lacinia metus nisi. Quisque vitae metus eu nisi ornare varius quis eu arcu. Proin cursus lectus nisl, et pretium nunc pharetra vitae. Donec ligula odio,42 venenatis sit amet risus et, eleifend vehicula velit. Praesent eget enim vehicula, pretium eros et, condimentum enim.
Donec pulvinar rutrum augue iaculis maximus. Nulla auctor, orci sed semper tristique, elit sapien condimentum lectus, sit amet semper libero felis ut felis. Sed mollis ipsum non lacus dignissim, ac dictum dolor tempus. Pellentesque dignissim ligula bibendum, tristique augue a, placerat ex. Aenean sed laoreet purus. Aliquam fermentum purus a augue ullamcorper faucibus.
References
- Caldwell, Ben; Cooper, Michael; Reid, Loretta Guarino & Vanderheiden, Gregg (eds.) (). Web Content Accessibility Guidelines (WCAG) 2.0 W3C.
- Lipsum.com (n.d.). Lipsum generator.
Inspiration
- Morse, Adam ().
A11y Stats.
Colors. - Juicy Studio (n.d.).
Luminosity Colour Contrast Ratio Analyser.