An official website of the State of Oregon Learn How you know » (how to identify a Oregon.gov website) An official website of the State of Oregon »
You are here:
Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines 2.0 define specific contrast ratios that must be met in order comply at particular levels. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).
When designing the color scheme of a website, web page, or document, be sure to consider whether there is sufficient contrast between foreground text and background. Use the tools listed in the Testing section to check the colors you've selected.
Several free tools have been developed that make it easy to check color combinations for WCAG 2.0 compliance.
The Paciello Group makes a color contrast tool (called Colour Contrast Analyser) that is made for Internet Explorer. The tool allows you to pick anything on the screen... so you can use it for web pages, PDF files, or whatever. MIT offers some nice training videos for both installation and use of the tool.
You can Download Contrast Analyser from the Paciello Group's site.
Homeland Security offers a full accessibility toolbar that has various tools that do a host of things, and the Paciello Group's color contrast tool is a part of that toolbar.
The WebAIM Color Contrast Checker is a website that provides an excellent companion to the Colour Contrast Analyser. Its most useful feature is a set of “Lighten” and “Darken” links that can be used to make subtle changes to existing colors until a Pass rating is attained.
Note: The color contrast checker in WebAIM has an eyedrop button that will enable you to get colors from anything - but as of 12/14/2018, this option only works on the Mac.
Most Details from this page were gleaned from the University of Washington's Accessible Technology section.
A .gov website belongs to an official government organization in the United States.
A lock icon ( ) or https:// means you’ve safely connected to the .gov website.
Your browser is out-of-date! It has known security flaws and may not display all features of this and other websites. Learn how
×