The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale (at least 18 point or 14 point bold) text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no contrast requirement.
Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed (e.g. logos).
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
To begin, we should ensure that the plugin UI design complies with the following Web Content Accessibility Guidelines:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
The visual presentation of text and images of text has a contrast ratio of at least
4.5:1, except for the following:Large Text: Large-scale (at least 18 point or 14 point bold) text and images of large-scale text have a contrast ratio of at least
3:1;Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no contrast requirement.
Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed (e.g. logos).
The visual presentation of the following have a contrast ratio of at least
3:1against adjacent color(s):User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Reference:
Contrast ratio
(L1 + 0.05) / (L2 + 0.05), whereRelative luminance
-- the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.
For the sRGB colorspace, the relative luminance of a color is defined as
L = 0.2126 * R + 0.7152 * G + 0.0722 * Bwhere R, G and B are defined as:RsRGB <= 0.03928thenR = RsRGB/12.92elseR = ((RsRGB+0.055)/1.055) ^ 2.4GsRGB <= 0.03928thenG = GsRGB/12.92elseG = ((GsRGB+0.055)/1.055) ^ 2.4BsRGB <= 0.03928thenB = BsRGB/12.92elseB = ((BsRGB+0.055)/1.055) ^ 2.4and RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255GsRGB = G8bit/255BsRGB = B8bit/255