Active user interface components must meet a 3:1 color contrast ratio. (This includes buttons, inputs, custom focus indicators, dropdowns, checkboxes, and radio buttons.)
When testing color contrast, evaluate buttons, input fields, focus indicators, dropdown (select) boxes, checkboxes, and radio buttons for a 3:1 contrast ratio using the Color Contrast Analyzer tool.
Buttons must have either the text or icon part of the button have a 3:1 contrast ratio against the background.
Input Fields and Dropdowns must have a 3:1 contrast ratio against the surrounding color. (Or there must be an outline that has a 3:1 contrast ratio). Dropdowns usually have an arrow to indicate that the element is a dropdown box, and the arrow or other icon used to tag it as a dropdown box must have a 3:1 contrast ratio.
Focus indicators must have a 3:1 contrast ratio if they are not the browser default. You compare the focus indicator to the adjacent color. (Ergo, if the focus indicator is outside the element, you compare it to the page background color. If the focus indicator is inside the element, you compare it to the background color of the element.)
Checkboxes and Radio Buttons must have a 3:1 contrast ratio against the background.
