OATMEAL
  • OATMEAL
  • Issue Priorities
  • Help
    • Fix TAB Key in Safari
  • OATMEAL Checklists
    • eBay Core Accessibility Tests
    • eBay Situational Tests
  • Color Contrast Methods
    • Color Contrast Analyzer
    • Colour Contrast Analyser - color codes
    • Colour Contrast Analyser - color picker
  • Keyboard Methods
    • Focus Moveable
    • Focus Visible
    • Focus Reachable
    • Focus Management
    • Skip to Main
    • Buttons and Links
  • Screen Reader Methods
    • NVDA Setup
    • NVDA Smoke Test
Powered by GitBook
On this page
  • Prerequisites
  • Steps
  • Tool Interface
  • Creating Issues
  • Text has poor contrast
  • Exceptions
  • Knowledge
  • Getting Hex Value of Text on the Page
  • About
  1. Color Contrast Methods

Colour Contrast Analyser - color codes

PreviousColor Contrast AnalyzerNextColour Contrast Analyser - color picker

Last updated 4 years ago

Prerequisites

Install for either Windows or Mac OS X.

This method assumes you have two hex color codes.

Steps

  1. Launch Colour Contrast Analyser

  2. Enter a color code into the Foreground Colour field for the text you're analyzing

  3. Enter a color code into the Background Colour field for the background of the text you're analyzing

  4. Verify that for Normal Text, you have a Pass (AA)

    • See Tool Interface section below for reference images

  5. If the text you're checking does not Pass (AA) for Normal Text, create an issue (see Text has poor contrast below).

Tool Interface

  • 1 - Foreground Color Code

  • 2 - Background Color Code

  • 3 - Foreground Color Picker

  • 4 - Background Color Picker

  • 5 - Normal Text Pass/Fail indicator

Windows Interface

Mac OS X Interface

Creating Issues

Make sure to provide enough information to identify instances of text with poor contrast.

Your team may wish to list failures for all failings of a certain type of text (list text, navigation text, superscript text, etc.) in one issue.

Text has poor contrast

  • Description: Text has poor contrast

    • Describe the type of text (ex. call to action button text has poor contrast) or use actual words as they appear on the page (ex. "THIS IS MORE THAN SUMMER SHOPPING" text has poor contrast)

    • Since you have the color codes, it may be useful to provide that information as well (ex. light grey text (#777777) has poor contrast with its white background (#FFFFFF)

  • Priority: P2

  • Label or Tag: #a11y143

Exceptions

Knowledge

Getting Hex Value of Text on the Page

Coming soon.

About

Author(s): Luis Garcia

Last Updated: 2017 April 07

See for Exceptions.

Colour Contrast Analyser
Color and Color Contrast Testing Methods
Colour Contrast Analyser for Windows window
Colour Contrast Analyser for Mac OS X window