--- title: Contrast Checker description: Contrast Checker --- [Skip to content](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker#main-content) - [English](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker) - [Deutsch](https://help.sitecockpit.com/de/dokumentation/bereiche/tools-features/kontrast-checker) 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/sections/tools-features/contrast-checker) - [Deutsch](https://help.sitecockpit.com/de/dokumentation/bereiche/tools-features/kontrast-checker) 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. [Contrast Checker](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#contrast-checker) # Contrast Checker ## The contrast checker is an integrated tool for visually checking color combinations between background and foreground content (e.g., text or icons). The aim is to improve the readability and recognizability of content on digital surfaces—especially for users with impaired vision. - [**Features at a glance**](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker#Features) - [**Color selection for foreground and background**](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker#Color-selection) - [**Direct preview**](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker#Direct-preview) - [**Contrast ratio calculation**](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker#Contrast-ratio) - [**Compliance indicator for different use cases**](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker#Compliance-indicator) - [**Advantages for users**](https://help.sitecockpit.com/en/documentation/sections/tools-features/contrast-checker#Advantages) ### **Features at a glance** #### **Color selection for foreground and background** Users can freely select both the background color and the text/icon color. The selection is made using a color selection field that supports various formats, including: - HEX - RGB - HSL Alternatively, a color code can be entered directly or selected using the color picker. #### **Direct preview** A preview is displayed on the right-hand side, showing the selected background together with text and icons. Sample texts in regular and large fonts as well as icons help to realistically assess the effect of the color combination. #### **Contrast ratio calculation** The tool automatically calculates the contrast ratio between the foreground and background colors. This is displayed numerically – the higher the value, the clearer the contrast. #### **Compliance indicator for different use cases** The result is broken down into three categories: - Regular text - Large text - Icons / UI elements ### **Advantages for users** - **Improved readability** A well-thought-out color selection ensures that content remains easy to read even in poor lighting conditions or on different displays. - **Realistic design** The direct preview and targeted adjustment of colors allow the visual design to be optimized in a practical and user-friendly way. - **Clarity in color selection** The contrast checker provides immediate feedback on whether a color combination is suitable – without additional expertise or external tools. - **Time-saving implementation** Fast calculation and feedback make the contrast checker an efficient tool for design, development, and editorial teams. - **Helpful for designing user controls** Icons and UI components are also taken into account - an important aspect for interactive and graphical interfaces. ![image-20250717-141741.png](https://solution360.atlassian.net/wiki/download/thumbnails/5069897746/image-20250717-141741.png?version=1&modificationDate=1752761862860&cacheVersion=1&api=v2&width=1000&height=323)![image-20250717-141811.png](https://solution360.atlassian.net/wiki/download/thumbnails/5069897746/image-20250717-141811.png?version=1&modificationDate=1752761892413&cacheVersion=1&api=v2&width=1000&height=321)![image-20250717-141848.png](https://solution360.atlassian.net/wiki/download/thumbnails/5069897746/image-20250717-141848.png?version=1&modificationDate=1752761930414&cacheVersion=1&api=v2&width=1000&height=324)   - [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