Module:Color contrast/doc: Difference between revisions

Content deleted Content added

Inline

Revision as of 16:08, 13 February 2022

This Lua module is used on approximately 536,000 pages, or roughly 1% of all pages.
To avoid major disruption and server load, any changes should be tested in the module's /sandbox or /testcases subpages, or in your own module sandbox. The tested changes can be added to this page in a single edit. Consider discussing changes on the talk page before implementing them.

This module depends on the following other modules:

Module:Color contrast/colors (sandbox)

This module is used primarily by

It is also used for tracking within

and for documentation in

Module:College color

The formulas used are stated in WCAG 2.x specifications. WCAG is the main guideline for creating accessible interfaces on the web.

Usage

To use this module, you may use one of the above listed templates or invoke the module directly

To compute relative luminescence:
{{ColorToLum|color}} or {{#invoke:Color contrast|lum|color}}
To compute a contrast ratio between two colors:
{{Color contrast ratio|color1|color2|error=?}} or {{#invoke:Color contrast|ratio|color1|color2|error=?}}
To determine which of two colors (color2a and color2b) has the greater contrast ratio with a particular color (color1):
{{Greater color contrast ratio|color1|color2a|color2b}} or {{#invoke:Color contrast|greatercontrast|color1|color2a|color2b}}
To compute the contrast ratio between the background and text colors specified in a css style string:
{{#invoke:Color contrast|styleratio|css style statement string|default background color|default text color}}

@@ Line 5: / Line 5: @@
 This module is used primarily by
-: {{tl|Color contrast ratio}}
+* {{tl|Color contrast ratio}}
-: {{tl|ColorToLum}} / {{tl|RGBColorToLum}}
+* {{tl|ColorToLum}} / {{tl|RGBColorToLum}}
-: {{tl|Color contrast conformance}}
+* {{tl|Color contrast conformance}}
-: {{tl|Ensure AAA contrast ratio}}
+* {{tl|Ensure AAA contrast ratio}}
-: {{tl|Ensure AA contrast ratio}}
+* {{tl|Ensure AA contrast ratio}}
-: {{tl|Greater color contrast ratio}}
+* {{tl|Greater color contrast ratio}}
 It is also used for tracking within
-: [[Module:Navbox]]
+* [[Module:Navbox]]
-: [[Module:Userbox]]
+* [[Module:Userbox]]
-: [[Module:Episode list]]
+* [[Module:Episode list]]
 and for documentation in
-: [[Module:College color]]
+* [[Module:College color]]
+The formulas used are [https://www.w3.org/WAI/GL/wiki/Relative_luminance#Definition_as_Stated_in_WCAG_2.x stated in WCAG 2.x specifications]. [[WCAG]] is the main guideline for creating accessible interfaces on the web.
 == Usage ==
 To use this module, you may use one of the above listed templates or invoke the module directly
+* To compute relative luminescence: <br> <code><nowiki>{{ColorToLum|color}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|lum|color}}</nowiki></code>
-To compute relative luminescence
-: <code><nowiki>{{ColorToLum|color}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|lum|color}}</nowiki></code>
+* To compute a contrast ratio between two colors: <br> <code><nowiki>{{Color contrast ratio|color1|color2|error=?}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|ratio|color1|color2|error=?}}</nowiki></code>
+* To determine which of two colors (color2a and color2b) has the greater contrast ratio with a particular color (color1): <br> <code><nowiki>{{Greater color contrast ratio|color1|color2a|color2b}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|greatercontrast|color1|color2a|color2b}}</nowiki></code>
-To compute a contrast ratio between two colors
-: <code><nowiki>{{Color contrast ratio|color1|color2|error=?}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|ratio|color1|color2|error=?}}</nowiki></code>
+* To compute the contrast ratio between the background and text colors specified in a css style string: <br> <code><nowiki>{{#invoke:Color contrast|styleratio|css style statement string|default background color|default text color}}</nowiki></code>
-To determine which of two colors (color2a and color2b) has the greater contrast ratio with a particular color (color1)
-: <code><nowiki>{{Greater color contrast ratio|color1|color2a|color2b}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|greatercontrast|color1|color2a|color2b}}</nowiki></code>
-To compute the contrast ratio between the background and text colors specified in a css style string
-: <code><nowiki>{{#invoke:Color contrast|styleratio|css style statement string|default background color|default text color}}</nowiki></code>
 <includeonly>{{sandbox other||