Difference between revisions of "Color References"

From Make Inclusive Websites
Jump to navigation Jump to search
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{References
 
{{References
 
|headline1=General
 
|headline1=General
|coord head1=326.416, 13.124, 0.000
+
|coordhead1=298.000, 2.000, 0.000
 
|references1=
 
|references1=
 
Use of Color;
 
Use of Color;
 
Web Content Accessibility Guidelines;   
 
Web Content Accessibility Guidelines;   
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
+
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html;
|headline2=Color_Scheme
+
We Are Colorblind;
|coord head2=326.416, 353.124, 0.000
+
Resources for Designing for the Colorblind;
 +
https://wearecolorblind.com/resources/collection/resources-for-designing-for-the-colorblind/;
 +
Color Blindness;
 +
Deque University - Accessibility Basic Concepts;
 +
https://dequeuniversity.com/class/archive/basic-concepts1/types-of-disabilities/color-blindness
 +
|headline2=Color Scheme
 +
|coordhead2=304.000, 2.000, 0.000
 
|references2=
 
|references2=
Color Oracle;  
+
Color Oracle;
Free color blindness simulator.;  
+
Free color blindness simulator;
 
https://colororacle.org;
 
https://colororacle.org;
Colorblindly;  
+
Colorblindly;
Simulates colorblindness in your web browser.;  
+
Simulates colorblindness in your web browser;
 
https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg;
 
https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg;
Colortester;
+
How to Use Color Blind Friendly Palettes to Make Your Charts Accessible;
Software that assesses if a website meets the WCAG 2.0 color contrast success criteria.;
+
Color palettes suitable for color blindness;
https://alfasado.net/apps/colortester.html;
+
https://venngage.com/blog/color-blind-friendly-palette/
How to Use Color Blind Friendly Palettes to Make Your Charts Accessible;  
+
|headline3=Information in color
Article about and color pallettes suitable for color blindness;  
+
|coordhead3=310.000, 2.000, 0.000
https://venngage.com/blog/color-blind-friendly-palette/;
 
|headline3=Information_in_color
 
|coord head3=326.416, 33.124, 0.000
 
 
|references3=
 
|references3=
 
Don’t use color alone to convey information;
 
Don’t use color alone to convey information;
Line 31: Line 34:
 
https://riccardoscalco.it/textures/;  
 
https://riccardoscalco.it/textures/;  
 
We Are Colorblind;  
 
We Are Colorblind;  
Examples of designs that work well or don't work for colorblind people.;  
+
Examples of designs that work well or don't work for colorblind people;
https://wearecolorblind.com/examples/
+
https://wearecolorblind.com/examples/;
 +
Lens of Color;
 +
Steven Lambert - Smashing Magazine;
 +
https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-color;
 +
Color and contrast accessibility: Don't convey information with color alone;
 +
Dave Gash, Meggin Kearney, Rachel Andrew, Rob Dodson - Google Developers;
 +
https://web.dev/color-and-contrast-accessibility/#don't-convey-information-with-color-alone
 
|headline4=
 
|headline4=
|coord head4=
+
|coordhead4=
 
|references4=
 
|references4=
 
|headline5=
 
|headline5=
|coord head5=
+
|coordhead5=
 
|references5=
 
|references5=
 +
|linksto=Contrast_References
 
|belongsto=Color
 
|belongsto=Color
 
}}
 
}}
Line 46: Line 56:
  
 
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
 
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
 +
 +
===We Are Colorblind===
 +
Resources for Designing for the Colorblind
 +
 +
https://wearecolorblind.com/resources/collection/resources-for-designing-for-the-colorblind/
 +
 +
===Color Blindness===
 +
Deque University - Accessibility Basic Concepts
 +
 +
https://dequeuniversity.com/class/archive/basic-concepts1/types-of-disabilities/color-blindness
  
 
==Color scheme==
 
==Color scheme==
 
===Color Oracle===
 
===Color Oracle===
Free color blindness simulator.
+
Free color blindness simulator
  
 
https://colororacle.org
 
https://colororacle.org
  
 
===Colorblindly===
 
===Colorblindly===
Simulates colorblindness in your web browser.
+
Simulates colorblindness in your web browser
  
 
https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg
 
https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg
 
===Colortester===
 
Software that assesses if a website meets the WCAG 2.0 color contrast success criteria.;
 
 
https://alfasado.net/apps/colortester.html
 
  
 
===How to Use Color Blind Friendly Palettes to Make Your Charts Accessible===
 
===How to Use Color Blind Friendly Palettes to Make Your Charts Accessible===
Article about and color pallettes suitable for color blindness
+
Color palettes suitable for color blindness
  
 
https://venngage.com/blog/color-blind-friendly-palette/
 
https://venngage.com/blog/color-blind-friendly-palette/
Line 80: Line 95:
  
 
===We Are Colorblind - Examples===
 
===We Are Colorblind - Examples===
Examples of designs that work well or don't work for colorblind people.
+
Examples of designs that work well or don't work for colorblind people
  
 
https://wearecolorblind.com/examples/
 
https://wearecolorblind.com/examples/
 +
 +
===Lens of Color===
 +
Steven Lambert - Smashing Magazine
 +
 +
https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-color
 +
 +
===Color and contrast accessibility: Don't convey information with color alone===
 +
Dave Gash, Meggin Kearney, Rachel Andrew, Rob Dodson - Google Developers
 +
 +
https://web.dev/color-and-contrast-accessibility/#don't-convey-information-with-color-alone

Latest revision as of 13:31, 6 June 2021

headline 1 General
headline 1 coordinates 298.000, 2.000, 0.000
references 1 Use of Color;

Web Content Accessibility Guidelines; https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html; We Are Colorblind; Resources for Designing for the Colorblind; https://wearecolorblind.com/resources/collection/resources-for-designing-for-the-colorblind/; Color Blindness; Deque University - Accessibility Basic Concepts; https://dequeuniversity.com/class/archive/basic-concepts1/types-of-disabilities/color-blindness

headline 2 Color Scheme
headline 2 coordinates 304.000, 2.000, 0.000
references 2 Color Oracle;

Free color blindness simulator; https://colororacle.org; Colorblindly; Simulates colorblindness in your web browser; https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg; How to Use Color Blind Friendly Palettes to Make Your Charts Accessible; Color palettes suitable for color blindness; https://venngage.com/blog/color-blind-friendly-palette/

headline 3 Information in color
headline 3 coordinates 310.000, 2.000, 0.000
references 3 Don’t use color alone to convey information;

3WC - Web Accessibility Initiative; https://www.w3.org/WAI/tips/designing/#dont-use-color-alone-to-convey-information; Textures.js; SVG patterns for Data Visualization; https://riccardoscalco.it/textures/; We Are Colorblind; Examples of designs that work well or don't work for colorblind people; https://wearecolorblind.com/examples/; Lens of Color; Steven Lambert - Smashing Magazine; https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-color; Color and contrast accessibility: Don't convey information with color alone; Dave Gash, Meggin Kearney, Rachel Andrew, Rob Dodson - Google Developers; https://web.dev/color-and-contrast-accessibility/#don't-convey-information-with-color-alone

headline 4
headline 4 coordinates
references 4
headline 5
headline 5 coordinates
references 5
links to Contrast_References
belongs to Color
contains

General[edit]

Use of Color[edit]

Web Content Accessibility Guidelines

https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

We Are Colorblind[edit]

Resources for Designing for the Colorblind

https://wearecolorblind.com/resources/collection/resources-for-designing-for-the-colorblind/

Color Blindness[edit]

Deque University - Accessibility Basic Concepts

https://dequeuniversity.com/class/archive/basic-concepts1/types-of-disabilities/color-blindness

Color scheme[edit]

Color Oracle[edit]

Free color blindness simulator

https://colororacle.org

Colorblindly[edit]

Simulates colorblindness in your web browser

https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg

How to Use Color Blind Friendly Palettes to Make Your Charts Accessible[edit]

Color palettes suitable for color blindness

https://venngage.com/blog/color-blind-friendly-palette/

Information in color[edit]

Don’t use color alone to convey information[edit]

3WC - Web Accessibility Initiative

https://www.w3.org/WAI/tips/designing/#dont-use-color-alone-to-convey-information

Textures.js[edit]

SVG patterns for Data Visualization

https://riccardoscalco.it/textures/

We Are Colorblind - Examples[edit]

Examples of designs that work well or don't work for colorblind people

https://wearecolorblind.com/examples/

Lens of Color[edit]

Steven Lambert - Smashing Magazine

https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-color

Color and contrast accessibility: Don't convey information with color alone[edit]

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

https://web.dev/color-and-contrast-accessibility/#don't-convey-information-with-color-alone