UniWiki:Manual of Style/Accessibility: Difference between revisions

Line 35:

# Do not use [[Wikipedia:Unicode|Unicode]] characters as icons; use an icon with alt text instead. For example, a character like "→" can not be reproduced into useful text by a [[Wikipedia:Screen reader|screen reader]], and will usually be read as a question mark.

== Color ==

= Color =

~~{{shortcut|WP~~:~~COLOR|WP~~:~~COLOUR|MOS~~:~~CONTRAST}}~~

:''See also: [[Wikipedia:Help:Using colours|Wikipedia:Using colors]], [[UniWiki:Manual of Style/Text formatting#Color]]''

~~{{Also|~~Help:Using colours|Wikipedia:Manual of Style/Text formatting#Color~~|WP:Link color}}~~

{{About|the use of colors in articles (though the advice on contrast ratios is applicable more generally)|the civility essay dealing with colors|Wikipedia:Don't edit war over the colour of templates|section=yes}}

~~{{Redirect|WP:COLORS|the citation guideline originating with references to the game ''[[Sonic Colors~~]]''~~|Wikipedia:Wisps' Law}}~~

[[File:Example of team color problem on Clive Churchill article.png|thumb|alt=Two screenshots of the same highly textual user interface. The top one uses red, green, and blue; the bottom one uses nearly the same color for red and green, so that the red text becomes nearly invisible in its green background.|A pair of screenshots showing the effects of red/green colorblindness on legibility]]

'''Colors''' are most commonly found in UniWiki articles within [[Wikipedia:Wikipedia:Template namespace|templates]] and [[Wikipedia:Wikipedia:How to use tables|tables]]. For technical assistance on how colors are used, see [[Wikipedia:Help:Using colours|Wikipedia:Using colors]].

'''Colors''' are most commonly found in ~~Wikipedia~~ articles within [[Wikipedia:Template namespace|templates]] and [[Wikipedia:How to use tables|tables]]. For technical assistance on how colors are used, see [[Help:Using colours]].

Articles (and other pages) that use color should keep accessibility in mind, as follows:

* Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an [[#Text|accessible symbol]] matched to a legend, or [[Wikipedia:Footnotes|footnote labels]]. Otherwise, [[blindness|blind]] users or readers accessing ~~Wikipedia~~ through a printout or device without a color screen will not receive that information.

* Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an [[#Text|accessible symbol]] matched to a legend, or [[Wikipedia:Wikipedia:Footnotes|footnote labels]]. Otherwise, [[Wikipedia:blindness|blind]] users or readers accessing the UniWiki through a printout or device without a color screen will not receive that information.

* Links should clearly be identifiable as a link to our readers.

* Some readers of Wikipedia are partially or fully [[color-blind]]. Ensure the contrast of the text with its background reaches at least [[WCAG|WCAG 2.0's]] AA level, and AAA level when feasible (see WCAG's [http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html "Understanding SC 1.4.3: Contrast (Minimum)"]). Here is a selection of tools that can be used to check that the contrast is correct:

* Some readers of Wikipedia are partially or fully [[Wikipedia:Color-blind|color-blind]]. Ensure the contrast of the text with its background reaches at least [[Wikipedia:WCAG|WCAG 2.0's]] AA level, and AAA level when feasible (see WCAG's [http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html "Understanding SC 1.4.3: Contrast (Minimum)"]). Here is a selection of tools that can be used to check that the contrast is correct:

** The [http://www.paciellogroup.com/resources/contrastAnalyser#download Color Contrast Analyser] enables you to pick colors on the page, and review their contrast thoroughly. However, be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference" which is outdated.

** You can also use [http://snook.ca/technical/colour_contrast/colour.html Snook's color contrast tool], which is entirely up-to-date.

** Several other tools exist on the web, but check if they are up-to-date before using them. Several tools are based on [[WCAG 1.0]]'s algorithm, while the reference is now [[WCAG 2.0]]'s algorithm. If the tool doesn't specifically mention that it is based on WCAG 2.0, assume that it is outdated.

** Several other tools exist on the web, but check if they are up-to-date before using them. Several tools are based on [[Wikipedia:WCAG 1.0|WCAG 1.0]]'s algorithm, while the reference is now [[Wikipedia:WCAG 2.0|WCAG 2.0]]'s algorithm. If the tool doesn't specifically mention that it is based on WCAG 2.0, assume that it is outdated.

* Additional tools can be used to help produce graphical charts and color schemes for maps and the like. These tools are not accurate means to review contrast accessibility, but they can be helpful for specific tasks.

** The [http://ColorSchemeDesigner.com/ color scheme generator] helps to choose a good set of colors for a graphical chart.

** [http://colorbrewer2.org/ Color Brewer 2.0] provides safe color schemes for maps and detailed explanations.

** [http://colorfilter.wickline.org/?j=1;t=a Colorfilter.wickline.org] or [http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com] are tools for simulating color blind vision.

* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place ({{Tl|Overcolored}} or {{tl|Overcoloured}}) on the top of the article:

~~{{Overcolored}}~~

== Block elements ==

@@ Line 35: / Line 35: @@
 # Do not use [[Wikipedia:Unicode|Unicode]] characters as icons; use an icon with alt text instead. For example, a character like "→" can not be reproduced into useful text by a [[Wikipedia:Screen reader|screen reader]], and will usually be read as a question mark.
-== Color ==
+= Color =
-{{shortcut|WP:COLOR|WP:COLOUR|MOS:CONTRAST}}
+:''See also: [[Wikipedia:Help:Using colours|Wikipedia:Using colors]], [[UniWiki:Manual of Style/Text formatting#Color]]''
-{{Also|Help:Using colours|Wikipedia:Manual of Style/Text formatting#Color|WP:Link color}}
-{{About|the use of colors in articles (though the advice on contrast ratios is applicable more generally)|the civility essay dealing with colors|Wikipedia:Don't edit war over the colour of templates|section=yes}}
-{{Redirect|WP:COLORS|the citation guideline originating with references to the game ''[[Sonic Colors]]''|Wikipedia:Wisps' Law}}
-[[File:Example of team color problem on Clive Churchill article.png|thumb|alt=Two screenshots of the same highly textual user interface. The top one uses red, green, and blue; the bottom one uses nearly the same color for red and green, so that the red text becomes nearly invisible in its green background.|A pair of screenshots showing the effects of red/green colorblindness on legibility]]
+'''Colors''' are most commonly found in UniWiki articles within [[Wikipedia:Wikipedia:Template namespace|templates]] and [[Wikipedia:Wikipedia:How to use tables|tables]].  For technical assistance on how colors are used, see [[Wikipedia:Help:Using colours|Wikipedia:Using colors]].
-'''Colors''' are most commonly found in Wikipedia articles within [[Wikipedia:Template namespace|templates]] and [[Wikipedia:How to use tables|tables]].  For technical assistance on how colors are used, see [[Help:Using colours]].
 Articles (and other pages) that use color should keep accessibility in mind, as follows:
-* Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an [[#Text|accessible symbol]] matched to a legend, or [[Wikipedia:Footnotes|footnote labels]]. Otherwise, [[blindness|blind]] users or readers accessing Wikipedia through a printout or device without a color screen will not receive that information.
+* Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an [[#Text|accessible symbol]] matched to a legend, or [[Wikipedia:Wikipedia:Footnotes|footnote labels]]. Otherwise, [[Wikipedia:blindness|blind]] users or readers accessing the UniWiki through a printout or device without a color screen will not receive that information.
 * Links should clearly be identifiable as a link to our readers.
-* Some readers of Wikipedia are partially or fully [[color-blind]]. Ensure the contrast of the text with its background reaches at least [[WCAG|WCAG 2.0's]] AA level, and AAA level when feasible (see WCAG's [http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html "Understanding SC 1.4.3: Contrast (Minimum)"]). Here is a selection of tools that can be used to check that the contrast is correct:
+* Some readers of Wikipedia are partially or fully [[Wikipedia:Color-blind|color-blind]]. Ensure the contrast of the text with its background reaches at least [[Wikipedia:WCAG|WCAG 2.0's]] AA level, and AAA level when feasible (see WCAG's [http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html "Understanding SC 1.4.3: Contrast (Minimum)"]). Here is a selection of tools that can be used to check that the contrast is correct:
 ** The [http://www.paciellogroup.com/resources/contrastAnalyser#download Color Contrast Analyser] enables you to pick colors on the page, and review their contrast thoroughly. However, be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference" which is outdated.
 ** You can also use [http://snook.ca/technical/colour_contrast/colour.html Snook's color contrast tool], which is entirely up-to-date.
-** Several other tools exist on the web, but check if they are up-to-date before using them. Several tools are based on [[WCAG 1.0]]'s algorithm, while the reference is now [[WCAG 2.0]]'s algorithm. If the tool doesn't specifically mention that it is based on WCAG 2.0, assume that it is outdated.
+** Several other tools exist on the web, but check if they are up-to-date before using them. Several tools are based on [[Wikipedia:WCAG 1.0|WCAG 1.0]]'s algorithm, while the reference is now [[Wikipedia:WCAG 2.0|WCAG 2.0]]'s algorithm. If the tool doesn't specifically mention that it is based on WCAG 2.0, assume that it is outdated.
 * Additional tools can be used to help produce graphical charts and color schemes for maps and the like. These tools are not accurate means to review contrast accessibility, but they can be helpful for specific tasks.
 ** The [http://ColorSchemeDesigner.com/ color scheme generator] helps to choose a good set of colors for a graphical chart.
 ** [http://colorbrewer2.org/ Color Brewer 2.0] provides safe color schemes for maps and detailed explanations.
 ** [http://colorfilter.wickline.org/?j=1;t=a Colorfilter.wickline.org] or [http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com] are tools for simulating color blind vision.
-* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place ({{Tl|Overcolored}} or {{tl|Overcoloured}}) on the top of the article:
-{{Overcolored}}
 == Block elements ==