{ "@context": "https://schema.org", "@type": "Article", "@id": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui", "url": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui", "identifier": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui", "name": "Wie man den Textkontrast einer ausgewählten Farbe vor dem Einsatz in der UI prüft", "headline": "Wie man den Textkontrast einer ausgewählten Farbe vor dem Einsatz in der UI prüft", "description": "Lerne, das WCAG-Kontrastverhältnis zu prüfen und Farben in HSL anzupassen, damit deine UI immer barrierefrei und lesbar ist.", "inLanguage": "de", "datePublished": "2026-08-29", "dateModified": "2026-08-29", "author": { "@type": "Person", "name": "Lubor Šimůnek" }, "publisher": { "@type": "Organization", "name": "lapnito.cz s.r.o.", "url": "https://appstoryo.com" }, "isPartOf": { "@type": "WebSite", "name": "AppStoryo", "url": "https://appstoryo.com" }, "license": "https://creativecommons.org/licenses/by/4.0/", "keywords": [ "Design", "article", "AppStoryo" ], "articleSection": "Design", "image": "https://appstoryo.com/upload/blog/check-text-contrast-picked-color-ui-hero.jpg", "encoding": [ { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.pdf", "encodingFormat": "application/pdf" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.md", "encodingFormat": "text/markdown" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.txt", "encodingFormat": "text/plain" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.json", "encodingFormat": "application/json" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.epub", "encodingFormat": "application/epub+zip" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.jats.xml", "encodingFormat": "application/xml" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.bib", "encodingFormat": "application/x-bibtex" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.ris", "encodingFormat": "application/x-research-info-systems" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui.csl.json", "encodingFormat": "application/vnd.citationstyles.csl+json" } ], "cite": "Lubor Šimůnek (2026). Wie man den Textkontrast einer ausgewählten Farbe vor dem Einsatz in der UI prüft. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/de/blog/check-text-contrast-picked-color-ui", "sections": [ { "level": 2, "heading": "Warum Kontrast so wichtig ist", "text": "Rund 300 Millionen Menschen weltweit haben eine Form von Farbsehschwäche. Gutes Kontrastdesign ist nicht nur Ästhetik — in vielen Regionen ist es eine gesetzliche Anforderung. Der Referenzstandard ist WCAG 2.1:\n\n- Level AA: Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text.\n- Level AAA: 7:1 für normalen Text." }, { "level": 2, "heading": "Häufige Fehler", "text": "Die häufigsten Probleme sind: Hellgrau auf Weiß (oft nur 1,5:1), bunte Schaltflächen mit weißem Text, die visuell gut wirken, aber AA nicht bestehen, sowie Farben, die im hellen Modus bestehen, im dunklen Modus aber scheitern." }, { "level": 2, "heading": "Praktischer Workflow", "text": "1. Hintergrundfarbe aufnehmen. Öffne Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237), richte die Kamera auf die Oberfläche und tippe, um den HEX-Wert sofort zu erhalten. Die App zeigt auch HSL an.\n2. Textfarbe auf dieselbe Weise aufnehmen.\n3. Das Paar in einem Kontrast-Checker prüfen — z. B. WebAIM Contrast Checker, das Accessibility-Panel in den DevTools oder das Contrast-Plugin in Figma.\n4. Helligkeit in HSL anpassen, bis das Verhältnis passt. H und S beibehalten, nur L verringern, um die Farbe abzudunkeln ohne ihre Identität zu ändern." }, { "level": 2, "heading": "Warum HSL für Kontrastanpassungen ideal ist", "text": "RGB und HEX bieten keine intuitive Kontrolle über die Helligkeit. HSL trennt Farbton, Sättigung und Helligkeit. Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker) zeigt HEX, RGB, HSL und CMYK gleichzeitig an — ohne manuelle Umrechnungen." }, { "level": 2, "heading": "Praxisbeispiel", "text": "Ein mittelblauer Button (#4A90E2) mit weißem Text hat ein Kontrastverhältnis von ca. 3,1:1 — nicht ausreichend für AA. Ein dunkles Marineblau (#1A3A6B) erreicht 9,4:1 und übertrifft sogar AAA." }, { "level": 2, "heading": "Hinweis zu WCAG 3.0 und APCA", "text": "Die nächste Version der Richtlinien führt APCA ein, ein nuancierteres Modell für Wahrnehmungskontrast. WCAG 2.1 AA bleibt der heute geltende Standard, aber ein Test gegen APCA lohnt sich für langfristige Projekte.\n\nLaden Sie Color Picker Camera: HEX RGB kostenlos für iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) oder Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) herunter — ohne Werbung, ohne Tracking und komplett offline nutzbar." } ], "text": "Warum Kontrast so wichtig ist\n\nRund 300 Millionen Menschen weltweit haben eine Form von Farbsehschwäche. Gutes Kontrastdesign ist nicht nur Ästhetik — in vielen Regionen ist es eine gesetzliche Anforderung. Der Referenzstandard ist WCAG 2.1:\n\n- Level AA: Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text.\n- Level AAA: 7:1 für normalen Text.\n\nHäufige Fehler\n\nDie häufigsten Probleme sind: Hellgrau auf Weiß (oft nur 1,5:1), bunte Schaltflächen mit weißem Text, die visuell gut wirken, aber AA nicht bestehen, sowie Farben, die im hellen Modus bestehen, im dunklen Modus aber scheitern.\n\nPraktischer Workflow\n\n1. Hintergrundfarbe aufnehmen. Öffne Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237), richte die Kamera auf die Oberfläche und tippe, um den HEX-Wert sofort zu erhalten. Die App zeigt auch HSL an.\n2. Textfarbe auf dieselbe Weise aufnehmen.\n3. Das Paar in einem Kontrast-Checker prüfen — z. B. WebAIM Contrast Checker, das Accessibility-Panel in den DevTools oder das Contrast-Plugin in Figma.\n4. Helligkeit in HSL anpassen, bis das Verhältnis passt. H und S beibehalten, nur L verringern, um die Farbe abzudunkeln ohne ihre Identität zu ändern.\n\nWarum HSL für Kontrastanpassungen ideal ist\n\nRGB und HEX bieten keine intuitive Kontrolle über die Helligkeit. HSL trennt Farbton, Sättigung und Helligkeit. Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker) zeigt HEX, RGB, HSL und CMYK gleichzeitig an — ohne manuelle Umrechnungen.\n\nPraxisbeispiel\n\nEin mittelblauer Button (#4A90E2) mit weißem Text hat ein Kontrastverhältnis von ca. 3,1:1 — nicht ausreichend für AA. Ein dunkles Marineblau (#1A3A6B) erreicht 9,4:1 und übertrifft sogar AAA.\n\nHinweis zu WCAG 3.0 und APCA\n\nDie nächste Version der Richtlinien führt APCA ein, ein nuancierteres Modell für Wahrnehmungskontrast. WCAG 2.1 AA bleibt der heute geltende Standard, aber ein Test gegen APCA lohnt sich für langfristige Projekte.\n\nLaden Sie Color Picker Camera: HEX RGB kostenlos für iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) oder Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) herunter — ohne Werbung, ohne Tracking und komplett offline nutzbar.", "markdown": "## Warum Kontrast so wichtig ist\n\nRund 300 Millionen Menschen weltweit haben eine Form von Farbsehschwäche. Gutes Kontrastdesign ist nicht nur Ästhetik — in vielen Regionen ist es eine gesetzliche Anforderung. Der Referenzstandard ist **WCAG 2.1**:\n\n- **Level AA**: Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text.\n- **Level AAA**: 7:1 für normalen Text.\n\n## Häufige Fehler\n\nDie häufigsten Probleme sind: Hellgrau auf Weiß (oft nur 1,5:1), bunte Schaltflächen mit weißem Text, die visuell gut wirken, aber AA nicht bestehen, sowie Farben, die im hellen Modus bestehen, im dunklen Modus aber scheitern.\n\n## Praktischer Workflow\n\n1. **Hintergrundfarbe aufnehmen.** Öffne [Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237), richte die Kamera auf die Oberfläche und tippe, um den HEX-Wert sofort zu erhalten. Die App zeigt auch HSL an.\n2. **Textfarbe** auf dieselbe Weise aufnehmen.\n3. **Das Paar in einem Kontrast-Checker prüfen** — z. B. WebAIM Contrast Checker, das Accessibility-Panel in den DevTools oder das Contrast-Plugin in Figma.\n4. **Helligkeit in HSL anpassen, bis das Verhältnis passt.** H und S beibehalten, nur L verringern, um die Farbe abzudunkeln ohne ihre Identität zu ändern.\n\n## Warum HSL für Kontrastanpassungen ideal ist\n\nRGB und HEX bieten keine intuitive Kontrolle über die Helligkeit. HSL trennt Farbton, Sättigung und Helligkeit. [Color Picker Camera: HEX RGB](https://play.google.com/store/apps/details?id=com.tomas.color_picker) zeigt HEX, RGB, HSL und CMYK gleichzeitig an — ohne manuelle Umrechnungen.\n\n## Praxisbeispiel\n\nEin mittelblauer Button (#4A90E2) mit weißem Text hat ein Kontrastverhältnis von ca. 3,1:1 — nicht ausreichend für AA. Ein dunkles Marineblau (#1A3A6B) erreicht 9,4:1 und übertrifft sogar AAA.\n\n## Hinweis zu WCAG 3.0 und APCA\n\nDie nächste Version der Richtlinien führt APCA ein, ein nuancierteres Modell für Wahrnehmungskontrast. WCAG 2.1 AA bleibt der heute geltende Standard, aber ein Test gegen APCA lohnt sich für langfristige Projekte.\n\n**Laden Sie Color Picker Camera: HEX RGB kostenlos für [iOS](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) oder [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) herunter** — ohne Werbung, ohne Tracking und komplett offline nutzbar.", "html": "

Warum Kontrast so wichtig ist

Rund 300 Millionen Menschen weltweit haben eine Form von Farbsehschwäche. Gutes Kontrastdesign ist nicht nur Ästhetik — in vielen Regionen ist es eine gesetzliche Anforderung. Der Referenzstandard ist WCAG 2.1:

Häufige Fehler

Die häufigsten Probleme sind: Hellgrau auf Weiß (oft nur 1,5:1), bunte Schaltflächen mit weißem Text, die visuell gut wirken, aber AA nicht bestehen, sowie Farben, die im hellen Modus bestehen, im dunklen Modus aber scheitern.

Praktischer Workflow

  1. Hintergrundfarbe aufnehmen. Öffne Color Picker Camera: HEX RGB, richte die Kamera auf die Oberfläche und tippe, um den HEX-Wert sofort zu erhalten. Die App zeigt auch HSL an.
  2. Textfarbe auf dieselbe Weise aufnehmen.
  3. Das Paar in einem Kontrast-Checker prüfen — z. B. WebAIM Contrast Checker, das Accessibility-Panel in den DevTools oder das Contrast-Plugin in Figma.
  4. Helligkeit in HSL anpassen, bis das Verhältnis passt. H und S beibehalten, nur L verringern, um die Farbe abzudunkeln ohne ihre Identität zu ändern.

Warum HSL für Kontrastanpassungen ideal ist

RGB und HEX bieten keine intuitive Kontrolle über die Helligkeit. HSL trennt Farbton, Sättigung und Helligkeit. Color Picker Camera: HEX RGB zeigt HEX, RGB, HSL und CMYK gleichzeitig an — ohne manuelle Umrechnungen.

Praxisbeispiel

Ein mittelblauer Button (#4A90E2) mit weißem Text hat ein Kontrastverhältnis von ca. 3,1:1 — nicht ausreichend für AA. Ein dunkles Marineblau (#1A3A6B) erreicht 9,4:1 und übertrifft sogar AAA.

Hinweis zu WCAG 3.0 und APCA

Die nächste Version der Richtlinien führt APCA ein, ein nuancierteres Modell für Wahrnehmungskontrast. WCAG 2.1 AA bleibt der heute geltende Standard, aber ein Test gegen APCA lohnt sich für langfristige Projekte.

Laden Sie Color Picker Camera: HEX RGB kostenlos für iOS oder Android herunter — ohne Werbung, ohne Tracking und komplett offline nutzbar.

" }