HEX arranged using colours outside these barriers is used by 1536colours, a very big document. This file is 172Kb and very complicated for the browser to display, so give it several seconds to load. For some users this file is so fat and complex, it may choke your poor system. If that happens, just hit your back button and back on out fast.
(For whatever reason, IE seemed to be able to handle it better than Netscape.)
To see the 1536 colors plus several grays: you should be running in Hi-Color (64,000 colors) mode or greater for your browser to be able to distinguish all these different colors.
Guideline from W3A. Don't rely on color alone.
Checkpoint 2.1 - Ensure that all information conveyed with color is also available without color,
for example from context or markup
Technique 2.1.1 [priority 1] Verify that information conveyed with color is available without color
Evaluation:
* Elements: IMG | APPLET | OBJECT | SCRIPT | INPUT | as well as the HTML elements and attributes
listed in the next technique (2.2.1).
Suggested message:
* Ensure that information is not conveyed through color alone. For example, when asking for input
from users, do not write "Please select an item from those listed in green." Instead, ensure that
information is available through other style effects (e.g., a font effect) and through context
(e.g,. comprehensive text links).
Suggested repair:
* Display a user notification if any of the color-possible elements are in the document.
Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast
when viewed by someone having color deficits or when viewed on a black and white screen
Technique 2.2.1 [priority 3] Test the color attributes of the following elements for visibility:
Evaluation:
* Elements:
o BODY bgcolor | text | alink | link | vlink | background =anything OR
o TABLE bordercolor | bgcolor =anything OR
o TD | TH bgcolor =anything OR
o HR color =anything OR
o any_element style="any_color_specification"
o STYLE "any_color_specification"... STYLE
o Where any_color_specification is defined as any CSS specification which contains:
color | background-color | background-image | background
* Requirement: Determine color visibility.
Ideally, images and multimedia object should also be tested for color visibility but algorithms
are beyond the scope of this specification.
Color visibility can be determined according to the following algorithm:
(This is a suggested algorithm that is still open to change.)
Two colors provide good color visibility if the brightness difference and the color difference
between the two colors are greater than a set range.
Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values.
This brightness value gives a perceived brightness for a color.
orange FF7F50 (255, 127,80) has a brightness of [(255*229) + (127*587) + (80*114)]/1000 = 142.064
The difference between the background brightness, and the foreground brightness should be greater than 125.
Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) +
(maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) +
(maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
Eg difference between orange FF7F50 (255, 127,80) and purple bb66cc (187, 102, 204) -
(maximum (255, 187) - min( (255, 187)) + (max (127, 102) - min(127, 102)) + (max (80, 204) - min((80, 204))
(255 - 187) + (127 - 102) + (204 - 80) = 217
The rage for color brightness difference is 125. The range for color difference is 500.
Examples
| Colour scheme |
Orange and mediumblue |
Yellowgreen and greenyellow |
deeppink and darkred |
Pale and black |
forestgreen and palegreen |
| Colour scheme |
255,165,0 and 0,0,205 |
154,205,50 and 173,255,47 |
255,20,147 and 139,0,0 |
255, 255, 221 and 0, 0, 0 |
34,139,34 and 152,251,152 |
| Brightness |
Orange 160
and mediumblue 23 |
Yellowgreen 172
and greenyellow 206 |
deeppink 105
darkred 41 |
Pale background 251
and black 0 |
forestgreen 96
with palegreen 210 |
| brightness Difference >125 |
136 |
34 |
63 |
251 |
114 |
| Colour Difference >500 |
217 |
72 |
283 |
722 |
348 |
| Better Colour choices |
peachpuff and mediumblue 493 |
Yellowgreen and black
409 |
lightpink and darkred
491 |
white and black
766 |
darkgreen and palegreen
455 |
Suggested message:
* Poor visibility between text and background colors.
Suggested repair:
* Allow the user to change the poor color combinations.
* Store any good color combinations entered by the user and use them as default prompts in the future.
A simple java script that allows you to experiment is Hextest, record your variants. The page 140 Colours uses only the named colours, and shows all combinations for these shades.
|