Error message contrast (error-indicators)

Error icons/outlines need ≥3:1 contrast; error text (including underlines) needs ≥4.5:1 (or ≥3:1 if large).


Insufficient created error message contrast:

This form has an error message with an insufficient contrast ratio against its background (1.7:1):

Note: Possible to automatically test. This violation can be detected by querying all controls/interactive elements (e.g., buttons), programmatically retrieving their color attributes (e.g., from the CSS stylesheet), along with the background-color attributes of their background elements, and verifying that an appropriate contrast ratio exists between them.


If the color of an element or the background-color of the parent element cannot be determined, a human tester or AI is required to visually check the contrast ratio of an input element against its background.

axe detected: none  |  QualWeb detected: none