Description
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.
Questions & Answers
Do checkbox components need to reach a certain contrast ratio?
Do checkbox components need to reach a certain color contrast ratio?
- color contrast
- non-text contrast
What are the contrast requirements for visible focus states?
The UI components on my page receive a visible indication of focus but the visible focus indicator is not native. What are the contrast requirements for visible focus states?
- non-text contrast
- states
- UI components
Do vector graphics in animated videos need to follow color contrast guidelines?
Do vector graphics in animated videos need to follow color contrast guidelines?
- animation
- contrast
- video
Does an element’s hover state have to reach 3:1 contrast ratio?
I have a dropdown list with black text in a form. Does the background bar on the hover states as you hover over each selection option require a 3.1 contrast ratio against the white container background, or can I use a light gray background bar...
- contrast
- hover state
Will “high contrast mode” fix my color contrast issues?
Can I just add a "high contrast mode" to my app take care of all of my contrast issues?
- color
- color blind
- contrast
- high contrast mode
Visible Indication of Focus on Text Fields
Does there need to be a visible indication of focus when there's a text pointer?
- contrast
- contrast ratios
- focus
- text
What are the contrast requirements for an element’s focus, mouseover & select states?
I'm working on updating my focus, mouseover (hover) & select (active) states and want to make sure that my new design meets contrast requirements. What are the contrast requirements for these different states?
- focus
- mouseover
- select
- states
Are there different contrast ratio requirements for text and for UI elements?
I want to make sure that my site uses proper contrast ratios. Are there different contrast ratio requirements for text and for UI elements?
- color
- contrast
- contrast ratios
Do images and art need to follow accessibility rules?
My site contains a lot of artwork, graphics, and some photography. My question is whether or not I need to do anything if they don't meet requirements. Or do they get a pass?
- art
- color
- graphics
- images
- video