Difference between revisions of "Contrast References"

From Make Inclusive Websites
Jump to navigation Jump to search
Line 21: Line 21:
 
Checks and finds good contrast between two colors;
 
Checks and finds good contrast between two colors;
 
https://contrast-finder.tanaguru.com/;
 
https://contrast-finder.tanaguru.com/;
No Coffee;
+
No Coffee - Vision simulator for Firefox;
Simulates slight to extreme vision problems in Chrome browsers;
+
Simulates slight to extreme vision problems;
https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl;
+
https://addons.mozilla.org/en-US/firefox/addon/nocoffee/;
 
Guide: Colours and contrast;
 
Guide: Colours and contrast;
 
Accessibility Developer Guide;
 
Accessibility Developer Guide;
Line 92: Line 92:
 
https://contrast-finder.tanaguru.com/
 
https://contrast-finder.tanaguru.com/
  
===No Coffee===
+
===No Coffee - Vision simulator for Firefox===
Simulates slight to extreme vision problems in Chrome browsers
+
Simulates slight to extreme vision problems
  
https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
+
https://addons.mozilla.org/en-US/firefox/addon/nocoffee/
  
 
===Colors and contrast===
 
===Colors and contrast===

Revision as of 14:53, 7 June 2021

headline 1 General
headline 1 coordinates 333.000, 0.000, 0.000
references 1 Contrast minimum;

Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html; Provide sufficient contrast between foreground and background; Tips for Getting Started - 3WC Web Accessibility Initiative; https://www.w3.org/WAI/tips/designing/#provide-sufficient-contrast-between-foreground-and-background; Contrast calculator: Calculating and testing easily accessible colour combinations; Leserlich - German Federation of the Blind and Partially Sighted; https://www.leserlich.info/werkzeuge/kontrastrechner/index-en.php; Contrast Ratio; Contrast ratio calculator and checker; https://contrast-ratio.com; Color Tool; Create, share, and apply color palettes and measure the accessibility level of any color combination; https://material.io/resources/color/; Tanaguru Contrast Finder; Checks and finds good contrast between two colors; https://contrast-finder.tanaguru.com/; No Coffee - Vision simulator for Firefox; Simulates slight to extreme vision problems; https://addons.mozilla.org/en-US/firefox/addon/nocoffee/; Guide: Colours and contrast; Accessibility Developer Guide; https://www.accessibility-developer-guide.com/knowledge/colours-and-contrast/; Article: Color and contrast accessibility; Dave Gash, Meggin Kearney, Rachel Andrew, Rob Dodson - Google Developers; https://web.dev/color-and-contrast-accessibility/; Color Contrast Accessibility Validator; Free color contrast analysis tools for web pages or color-pairs; https://color.a11y.com/?boia; Colortester; Software that assesses if a website meets the WCAG 2.0 color contrast success criteria; https://alfasado.net/apps/colortester.html; Contrast; A macOS app for quick access to WCAG color contrast ratios; https://usecontrast.com/; Color Safe; Accessible color palettes based on WCAG Guidelines of text and background contrast ratios; http://colorsafe.co/; Colour contrast - why does it matter; GOV.UK - Accessibility in government; https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/

headline 2
headline 2 coordinates
references 2
headline 3
headline 3 coordinates
references 3
headline 4
headline 4 coordinates
references 4
headline 5
headline 5 coordinates
references 5
links to Color_References
belongs to Contrast
contains

General

Contrast minimum

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Provide sufficient contrast between foreground and background

Tips for Getting Started - 3WC Web Accessibility Initiative

https://www.w3.org/WAI/tips/designing/#provide-sufficient-contrast-between-foreground-and-background

Contrast calculator: Calculating and testing easily accessible colour combinations

Leserlich - German Federation of the Blind and Partially Sighted

https://www.leserlich.info/werkzeuge/kontrastrechner/index-en.php

Contrast Ratio

Contrast ratio calculator and checker

https://contrast-ratio.com

Color Tool

Create, share, and apply color palettes and measure the accessibility level of any color combination

https://material.io/resources/color/

Tanaguru Contrast Finder

Checks and finds good contrast between two colors

https://contrast-finder.tanaguru.com/

No Coffee - Vision simulator for Firefox

Simulates slight to extreme vision problems

https://addons.mozilla.org/en-US/firefox/addon/nocoffee/

Colors and contrast

Accessibility Developer Guide

https://www.accessibility-developer-guide.com/knowledge/colours-and-contrast/

Color and contrast accessibility

Dave Gash, Meggin Kearney, Rachel Andrew, Rob Dodson - Google Devolopers

https://web.dev/color-and-contrast-accessibility/

Color Contrast Accessibility Validator

Free color contrast analysis tools for web pages or color-pairs

https://color.a11y.com/?boia

Colortester

Software that assesses if a website meets the WCAG 2.0 color contrast success criteria

https://alfasado.net/apps/colortester.html

Contrast

A macOS app for quick access to WCAG color contrast ratios

https://usecontrast.com/

Color Safe

Accessible color palettes based on WCAG Guidelines of text and background contrast ratios

http://colorsafe.co/

Colour contrast - why does it matter?

GOV.UK - Accessibility in government

https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/