BETTER SETUP for visually impaired of the BLUE HA NAVIGATION BAR

typxxi · March 18, 2024, 4:53pm

Hello,

we have now a visually impaired family member that needs to use HA.

We have currently an issue with the horizontal bar cause he can not recognise which of the tabs is the currently active one as seen here the °C tab.

There is only a small white indicator line at the bottom of the bar its height is way too low for him to be recogniced. Also the text colours are not different enough, pretty much the same white, just the current tab is a bit whiter than the others which are more white greyish.

The easiest way would be an adjustable height for the white indicator on the bottom of the blue HA bar.

BUT: WHERE CAN I ADJUST THAT ?

thanks a lot for your support !

tom_l · March 18, 2024, 9:15pm

No need to yell.

There is no option for adjusting the selected view marker. However you can adjust the colours for higher contrast using themes.

See: https://www.home-assistant.io/integrations/frontend/#defining-themes

You may also find that using the built in night theme is higher contrast. This can be set in your profile on each device (the circle icon with your initials at the bottom of the left hand menu).

You can also give feedback on usability for vision impaired users here:

Making HA accessible to everyone is a priority.

os.habitats.tech · March 19, 2024, 2:31am

If you were to provide a browser based dashboard you can scale the browser to provide larger icons/text.

vs

Ildar_Gabdullin · March 19, 2024, 9:16am

Meanwhile you may add a custom theme:

test_header:

  card-mod-theme: test_header

  card-mod-root-yaml: |
    .: |
      paper-tab:hover {
        color: blue;
        background-color: red;
      }
      paper-tab.iron-selected {
        color: white;
        background-color: lightgreen;
      }

card-mod themes discussed here
where to put card-mod theme code? , also here

typxxi · March 19, 2024, 9:55pm

beautifull !
I will try this in the next few days cause I have showed your nice animation to him and he liked it that way a lot.

Hats off !

tom_l · March 19, 2024, 11:51pm

Might want to change the blue text on red background though. That is notoriously hard to read.

typxxi · March 20, 2024, 12:43am

I have shown the idea and not decided about the colours which to choose cause that might have be his decision cause that is hard to predict which colors offer the best contrast he can see or read better with his only eye and 60% visibility left.

thanks

Ildar_Gabdullin · March 20, 2024, 8:58am

I specially used these colors to demonstrate the method. Some colors obviously cannot be used in case of color-blindness, for example.

Mariusthvdb · March 20, 2024, 9:02am

is that the preferred method? I’ve always used aria-selected=true, and, testing, can not see a performance issue.

      paper-tab[aria-selected=true] {
        color: var(--tab-active-color);
        background: rgba(var(--primary),0.3);
        --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
      }

could be subtle though or different in other ways I am not aware of

btw, getting back to the OP you could also do this, and complete the whole ‘selected’ item:

      /* Set the color of the currently selected tab indicator. */
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--active-color) !important;
      }

~~or? isnt that active anymore, and has that element changed… need to re-check that~~ needed !important, I edited above

could be .iron-selected is faster than the test for [aria-selected=true] ?

btw, better use background: in stead of background-color:, its more robust, and less code…

typxxi · March 22, 2024, 12:26am

I have read the topics you had linked to and tried this without any succes

#1
I have added the themes line to my configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

#2
I have opened the terminal and did
cd /config
mkdir themes
cd themes

#3
there I have created the file
nano my_custom_themes.yaml

and pasted your code into it

hbb_1_eye_header:

  card-mod-theme: hbb_1_eye_header

  card-mod-root-yaml: |
    .: |
      paper-tab:hover {
        color: blue;
        background-color: red;
      }
      paper-tab.iron-selected {
        color: white;
        background-color: lightgreen;
      }

#4
I finally went to developer tools.
Ihere I had chosen the services tab and
then I selected the service

reload themes

and started this service

Nothing happened in the UI, no change - even after a full ha reboot

What did I got wrong ?
thanks

SOLVED !

There is a step missing in your description you had linked here

#5 has also to happen on the developer tools - service tab

choose: Themes set
select 1 of the offered themes, in my case “hbb_1_eye_header”

Seconds later the main navigation bar has changed as you had shown in your animation - really beautifull solution

Now I have to show it to him and let him choose his colors.

FINAL QUESTION:

I had never worked with themes before so I wonder if this is a “per user” or “general installation” setup for all users ?

typxxi · March 22, 2024, 12:51am

UPDATE 2

I have a small issue

I adopted the colors to a darblue and white scheme for the selected tab and hoped to get an even more sharper black white scheme for the tab i am pointing or hovering .

But that white is again a greyish white even though i had not changed your white.

Or is there a way to change the WHITE inside the whole blue bar into a pure white for more contrast as seen in the first “ÖL” tab ?

Our latest test code and colour combination:

KOPFZEILE_SCHWARZ_WEISS:

  card-mod-theme: KOPFZEILE_SCHWARZ_WEISS

  card-mod-root-yaml: |
    .: |
      paper-tab:hover {
        color: white;
        background-color: black;
      }
      paper-tab.iron-selected {
        color: white;
        background-color: darkblue;
      }

It feels like that for the top bar they have use a kind of fog layer on the font which make them less visible cause the fell a bit white blueish not really white even though I have added these 2 lines also

KOPFZEILE_SCHWARZ_WEISS:

  card-mod-theme: KOPFZEILE_SCHWARZ_WEISS

  app-header-background-color: "black"
  app-header-text-color: "white"

  card-mod-root-yaml: |
....

Ildar_Gabdullin · March 22, 2024, 5:21am

Themes are set at least per a client.
Cannot say about users, got only one user in my setup.

Ildar_Gabdullin · March 22, 2024, 2:15pm

I see same:

Not 100% white. Will check it.

Enjoy ))

  card-mod-root-yaml: |
    paper-tab $: |
      .tab-content {
        opacity: 1 !important;
      }
    .: |
      paper-tab:hover {
        color: white;
        background-color: red;
      }
      paper-tab.iron-selected {
        color: white;
        background-color: lightgreen;
      }

typxxi · March 23, 2024, 9:12pm

thanks again - i have added it and had already changed background and font colour.

Now I have a pure white on the whole bar which increases readability again.
This is my themes.yaml file

HEADER_BLACK_AND_WHITE:

  card-mod-theme: HEADER_BLACK_AND_WHITE

  app-header-background-color: "black"
  app-header-text-color: "white"
  

  card-mod-root-yaml: |
    paper-tab $: |
      .tab-content {
        opacity: 1 !important;
      }
    .: |
      paper-tab:hover {
        color: white;
        background-color: blue;
      }
      paper-tab.iron-selected {
        color: white;
        background-color: darkred;
      }


HEADER_YELLOW_BLUE_RED:

  card-mod-theme: HEADER_YELLOW_BLUE_RED

  card-mod-root-yaml: |
    .: |
      paper-tab:hover {
        color: blue;
        background-color: red;
      }
      paper-tab.iron-selected {
        color: white;
        background-color: yellow;
      }

and this is how it looks right now where my father has chosen the colours based on his 49 inch screen cause it looked different on my laptop.

DARKRED is his current selection and blue the one his cursor is hovering over.

Final question cause it seems there is a lot more changeable then thought:

Can we increase the font size for this bar too ?