ProblemYou want to make sure there is enough contrast between two colors. SolutionUse the Luminosity Contrast Ratio Analyser from JuicyStudio.com at http://juicystudio.com/services/luminositycontrastratio.php. Enter two color values into the validator and press Calculate Luminosity Contrast Ratio button, as shown in Figure 12-9. Figure 12-9. Entering values to check luminosity contrastAlong with a color sample of the two colors, a summary is presenting noting whether you pass the luminosity contrasts level 2, level 3, or not at all. In Figure 12-10, the example notes that the color combination has passed both levels 2 and 3. Figure 12-10. The results of the luminosity testDiscussionThe W3C's Web Content Accessibility Guidelines state that in order to make text legible, designers need to make the content in the foreground be able to be perceived against the background. When the color for text is close to the same shade of hue as the background color, the text becomes illegible. To create legible text, the colors need to have greater contrast by being further apart from each other in the spectrum or be significantly darker or lighter shade of the same color. An example of great contrast is the yellow text against a black background much like the stylized Batman logo (from the Tim Burton Batman movies of the 1990s). For colors to pass the second level of the luminosity, the ratio of luminosity contrast needs to be at least 5:1. That means one color needs to be at least 5 times as darker or lighter as the other color. For colors to pass the third level, the luminosity contrast ratio must be at least 10:1. See AlsoJuicyStudio.com's explanation of the Suggested Luminosity Contrast Ratio Algorithm at http://juicystudio.com/article/luminositycontrastratioalgorithm.php. |