# Open Input Accessibility Issues

**URL:** <https://community.evolveauthoring.com/t/open-input-accessibility-issues/2820>\
**Category:** General Help\
**Tags:** accessibility, theming, design\
**Created:** [February 16, 2024, 5:36pm UTC](https://community.evolveauthoring.com/t/open-input-accessibility-issues/2820 "2024-02-16T17:36:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nath](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/nath/32/2608_2.png) [@nath](https://community.evolveauthoring.com/u/nath)\
**Post date:** [February 16, 2024, 5:36pm UTC](https://community.evolveauthoring.com/t/open-input-accessibility-issues/2820/1 "2024-02-16T17:36:49Z")

</div>

Hi All

We’re trying to create a AA accessible course but we’re having two issues with the Open Input Component.

1. In safari on Mac the placeholder text colour seems to be set to #A9A9A9 which is failing contrast checking. Strangely in Chrome we’re getting #757575 when we screenshot it but #454545 in the inspector panel using dev tools.

2. The Open input text doesn’t seem to use the device size settings in: Theme \> Course \> Body Text Appearance \> Font Family & Font Size. It appears to always use the desktop setting no matter what device size?

Not sure if I’m doing anything to affect this or if it’s a bug.

Any help would be much appreciated.

---

<div class="post-metadata">

**Author:** ![Matt\_Leathes](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/matt_leathes/32/586_2.png) [@Matt\_Leathes](https://community.evolveauthoring.com/u/Matt_Leathes)\
**Post date:** [February 17, 2024, 3:09pm UTC](https://community.evolveauthoring.com/t/open-input-accessibility-issues/2820/2 "2024-02-17T15:09:42Z")

</div>

With regards to point 1, it’s actually the browser defining the colour of the placeholder text - which is why it’s different in Safari.

In Chrome the #454545 is the input text colour i.e. the colour of the text you actually type into it. #757575 is the placeholder text colour.

I have a feeling that when the open input component was added to Evolve, browsers didn’t actually support styling placeholder text - and it looks like it was just an oversight that it never got added to Evolve once support for it made it into most major browsers.

I will get this changed for you.

---

<div class="post-metadata">

**Author:** ![nath](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/nath/32/2608_2.png) [@nath](https://community.evolveauthoring.com/u/nath)\
**Post date:** [February 19, 2024, 9:16am UTC](https://community.evolveauthoring.com/t/open-input-accessibility-issues/2820/3 "2024-02-19T09:16:38Z")

</div>

Thanks for your reply! Makes a lot of sense.

Also thanks looking into getting it changed. 🙂

---

<div class="post-metadata">

**Author:** ![Matt\_Leathes](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/matt_leathes/32/586_2.png) [@Matt\_Leathes](https://community.evolveauthoring.com/u/Matt_Leathes)\
**Post date:** [February 19, 2024, 6:18pm UTC](https://community.evolveauthoring.com/t/open-input-accessibility-issues/2820/4 "2024-02-19T18:18:34Z")

</div>

@nath no problem at all, thanks for raising it!

It looks like the placeholder style used by Firefox would fail the contrast check too.

FYI rather than set it to `#454545` I’ve decided to use the colour that Chrome uses, since that:

- passes the Level AA contrast check and
- means there’s a difference between the ‘placeholder’ text colour and the ‘user input’ text colour, which I think is worth having