Better Color Contrast - NC State University IT Accessibility

Better Text Contrast Through
Browser-Based Image Analysis
Greg Kraus
University IT Accessibility Coordinator
North Carolina State University
A Nod to Semantics
• The WCAG 2 requirement defines contrast
ratios measured by “luminance contrast”.
• “Color contrast” is a non-specific term but is
the popular way people understand the
Current Methods
1. Automated tools inspecting the DOM
– Determine the foreground and background
2. “Eyedropper” tools
– Pick two colors to compare
Problems with Automated Testing:
Text In Images
Get Help
Problems with Automated Testing:
CSS3 Gradients
Problems with “Eyedroppers”:
Changing Colors: Text Over an Image
Problems with “Eyedroppers”: AntiAliased Text
What this tool does
• Takes a picture of
– The visible portion of the page
– The entire page
– A selection within the page
• Calculates the contrast level between adjacent
• Marks places where two pixels have sufficient
1 Pixel Radius
2 Pixel Radius
Dangers of This Tool
• WCAG 2 contrast requirements only apply to
– Not lines, borders, and graphical elements
• Text exceptions
– Logos
– Inactive form elements
– Purely decorative text
– Incidental text in photos
Must Understand Text Size Thresholds
• 18 pt vs. 14 pt
• Approximately 1.5em vs. 1.2 em
PDFs and Images
• Total Serendipity
What people have asked for
• Show analysis of individual elements
• Invert the mask
• Firefox version
What We Are Working On
• Interface for tactile feedback on a tablet
– Identify the object that lacks contrast
– Allow users to feel the threshold borders
Where to Get It
• Other Color Tools
– Accessible Color Palette
– Web Page Color Extractor
• Soon to be released

similar documents