--- title: "AA: Elements must have sufficient color contrast (WCAG 1.4.3)" description: Learn why sufficient color contrast is crucial for readability and accessibility, and how you can meet the WCAG 1.4.3 requirements for text and controls. --- [Skip to content](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast#main-content) - [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast) - [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/color-contrast) English Show submenu for translations ![SiteCockpit Logo](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20mit%20claim_rgb.png?width=328&height=92&name=siteCockpit%20mit%20claim_rgb.png) - [Tickets](https://hub.sitecockpit.com/portal) - [Dokumentation](https://help.sitecockpit.com/de/dokumentation) - [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout) Open main navigation Close main navigation - [Tickets](https://hub.sitecockpit.com/portal) - [Dokumentation](https://help.sitecockpit.com/de/dokumentation) - [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout) - - [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast) - [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/color-contrast) English Show submenu for translations - [Contact us](mailto:kontakt@sitecockpit.com) [Contact us](mailto:kontakt@sitecockpit.com) How can we help you? - There are no suggestions because the search field is empty. 1. [Documentation](https://help.sitecockpit.com/en/documentation?hsLang=en) 2. [Backend](https://help.sitecockpit.com/en/documentation/backend?hsLang=en) 3. [easyMonitorung manual checks](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitorung-manual-checks) # AA: Elements must have sufficient color contrast (WCAG 1.4.3) ## color-contrast - [**Meaning**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast#This-means) - [**Impact**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast#Impact) - [**Recommendation**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast#Recommendation) - [**Examples**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast#Examples) - [**Note**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/color-contrast#Note) ### **This means** Text, symbols, and controls must stand out clearly from the background. The **color contrast between the foreground and background** must be sufficient to ensure that content is easily readable even by people with impaired vision, color blindness, or in bright environments. According to WCAG 1.4.3 (AA), the following applies: - **Normal text:** minimum contrast ratio of **4.5:1** - **Large text (18 pt or 14 pt bold):** minimum **3:1** - **Non-text elements (symbols, icons):** should also be clearly recognizable ### **Impact** If the contrast is too low, content is difficult or impossible to read. Users overlook important information, navigation, or buttons. This impairs both accessibility and conversion and violates WCAG 1.4.3 (AA) *Contrast (Minimum)*. ### **Recommendation** - Check color contrasts regularly with our [Contrast Checker](https://www.sitecockpit.com/de/dashboard/contrast-checker). - If necessary, increase the text color (darker) or the background (lighter) until the ratio reaches **at least 4.5:1**. - Avoid light gray tones on white or pastel backgrounds. - Ensure that links, buttons, and icons differ from the rest of the content not only in color but also in style. - Do not use semi-transparent colors or overlays that reduce contrast. ### **Examples** *Problematic:* ```

This text is difficult to read.

This text meets WCAG requirements.

``` ![](https://help.sitecockpit.com/hs-fs/hubfs/image-png-Oct-08-2025-11-46-48-9935-AM.png?width=670&height=140&name=image-png-Oct-08-2025-11-46-48-9935-AM.png) A dark gray tone provides significantly better contrast and readability. *Alternative:* ```

Here is the text

``` **![](https://help.sitecockpit.com/hs-fs/hubfs/image-png-Oct-08-2025-11-45-00-1028-AM.png?width=670&height=142&name=image-png-Oct-08-2025-11-45-00-1028-AM.png)** White text on a dark background – also provides sufficient contrast. ### **Note** Sufficient color contrast is one of the most important factors in visual accessibility. It not only improves accessibility, but also the user experience on mobile devices and in bright environments. **Related WCAG criterion:** [WCAG 1.4.3 - Contrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum) - [General Information](https://help.sitecockpit.com/en/documentation/general-information?hsLang=en#main-content) - [Information](https://help.sitecockpit.com/en/documentation/general-information?hsLang=en#information) - [Dashboard](https://help.sitecockpit.com/en/documentation/general-information?hsLang=en#dashboard) - [Backend](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#main-content) - [easyVision](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easyvision) - [easyMonitoring](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitoring) - [easyMonitorung manual checks](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitorung-manual-checks) - [easyMonitorung automatic checks](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitorung-automatic-checks) - [easyAI](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easyai) - [easyStatement](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easystatement) - [Contrast Checker](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#contrast-checker) - [easyLanguage](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easylanguage) - [easyVision integration](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#main-content) - [Setup](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#setup) - [Installlation](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#installlation) - [Browser Extensions](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#browser-extensions) - [Servicepartner](https://help.sitecockpit.com/en/documentation/servicepartner?hsLang=en#main-content) - [General Information](https://help.sitecockpit.com/en/documentation/servicepartner?hsLang=en#general-information) - [Stripe](https://help.sitecockpit.com/en/documentation/servicepartner?hsLang=en#stripe) - [Support](https://help.sitecockpit.com/en/documentation/support?hsLang=en#main-content) - [FAQ](https://help.sitecockpit.com/en/documentation/support?hsLang=en#faq) - [Ticket system](https://help.sitecockpit.com/en/documentation/support?hsLang=en#ticket-system) [![siteCockpit rgb](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20rgb.png?width=200&height=42&name=siteCockpit%20rgb.png "siteCockpit rgb")](https://www.sitecockpit.com/) Telefon: +49(0)30 403 64 98 98 E-Mail: kontakt@sitecockpit.com [mailto:kontakt@sitecockpit.com](mailto:kontakt@sitecockpit.com) Copyright © 2025, Site Cockpit GmbH