![]() Is that contrast ratio (the difference in brightness) can be used to distinguish text The Use of Color success criterion addresses changing only the color (hue) of an object or text without otherwise altering the object's form. The last example shows the state indicator contrasting The secondĪnd third show the radio button selected and filled with a color that contrasts with Figure 5 The first radio button shows the default state with a grey (#949494) circle. It is possible to use a flat design where the status indicator fills the componentĪnd does not contrast with the component, but does contrast with the colors adjacent ![]() Figure 4 A customized checkbox with light grey check (#E5E5E5), which has a contrast ratio Or the thumb of a slider, that part might be within the component so the adjacentĬolor might be another part of the component. There is also a border (silver) on the component thatįor visual information required to identify a state, such as the check in a checkbox Figure 3 The contrast of the input background (white) and color adjacent to the control (darkīlue #003366) is sufficient. The component, so the contrast ratio is taken between the white background and darkīlue background. The border does not interfere with identifying The input also has a dark grey border which is considered The following example shows an input that has a light background on the inside andĪ dark background around it. Is considered to be subsumed into the color closest in brightness (perceived luminance). For example,Ī 3D drop-shadow on an input, or a dark border line between contrasting backgrounds The component can be ignored for the purpose of measuring contrast ratio. If components use several colors, any color which does not interfere with identifying Figure 2 A standard text input with a grey border (#767676) and white adjacent color outside Adjacent colorsįor user interface components 'adjacent colors' means the colors adjacent to the component.įor example, if an input has a white internal background, dark border, and white externalīackground the 'adjacent color' to the component would be the white external background. Indicator that is a defined visual boundary of grey (#949494) adjacent to white. Figure 1 A button (active control) without a visual boundary, and the same button with a focus The boundary of controls to aid in the recognition of controls and therefore the completion Note that for people with cognitive disabilities it is recommended to delineate There is no contrast requirement beyond the text contrast ( 1.4.3 Contrast (Minimum)). With text also has a colored border, since the border does not provide the only indication Visual indication of the hit area then the Success Criterion is passed. Within a button or placeholder text inside a text input is visible and there is no The control, then that indicator must have sufficient contrast. The hit area, but if the visual indicator of the control is the only way to identify This success criterion does not require that controls have a visual boundary indicating However, the component must not lose contrast with the adjacent colors,Īnd non-text indicators such as the check in a checkbox, or an arrow graphic indicatingĪ menu is selected or open must have sufficient contrast to the adjacent colors. ![]() For example, there is not a new requirement that visited linksĬontrast with the default color, or that mouse hover indicators contrast with theĭefault state. States of an individual component meet the 3:1 contrast ratio when they do not appear This Success Criterion does not require that changes in color that differentiate between Information used to identify the control in that state has a minimum 3:1 contrast State, such as whether a component is selected or focused must also ensure that the Also, any visual information necessary to indicate Identify that a control is present and how to operate it must have a minimum 3:1 contrast Active User Interface Componentsįor active controls any visual information provided that is necessary for a user to 2.999:1 would not meet theģ:1 threshold). Ratio, the computed values should not be rounded (e.g. When comparing the computed contrast ratio to the Success Criterion The 3:1 contrast ratios referenced in this Success Criterion is intended to be treatedĪs threshold values.
0 Comments
Leave a Reply. |