A11y: Placeholder contrast in form elements

[annsch]

The problem

Aktuell haben Form Elemente wie input und select mit Placeholder keinen ausreichenden Kontrast. Das wird z.B. von Lighthouse (bzw. axe) angemeckert:

"Background and foreground colors do not have a sufficient contrast ratio. Low-contrast text is difficult or impossible for many users to read."

Hier auch nochmal der Link zu der Beschreibung, welches Kontrastverhätnis für Placeholder laut WCAG gelten muss: https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/

The solution

Der Kontrast für Placeholder sollte erhöht werden, so dass er den WCAG Kriterien erfüllt und damit Testing Tools wie Lighthouse keinen Fehler mehr anzeigen. In Zukunft wird es wahrscheinlich immer mehr Projekte geben, in denen die A11y Richtlinien so streng sind, dass der Lighthouse Score in die Dev Pipeline mit aufgenommen wird. Das kann dazu führen, dass in den Projekten der Kontrast händisch angepasst wird, um die Testing Tools zufrieden zu stellen.

Examples

No response

[annsch]

@mfranzke fyi

[mfranzke]

@annsch, perfekt, danke Dir für den Issue. Dann können wir das Thema ganzheitlich angehen.

[leape]

@annsch @mfranzke habs für Stable hochpriorisiert