CheckBox and accesibility behavior is unexpeted in Android, how control it's text color

Jalza 781 Reputation points
2021-09-23T10:45:12.267+00:00

I'm developing Xamarin.Forms app, and I have to take into account people with visual disabilities. I mostly use black and white colors to have the highest contrast and device's day/night mode is used to set element color. I'm using automation properties to give information to the screen reader.

The
CheckBox
doesn't have Text property. But if I use
AutomationProperties.Name
the text is shown in Android and I can't set it's color, because is not the same of
CheckBox.Color
property. This is a big problem because sometimes the text is unreadable.

Example code with 2 checkboxes, first without AutomationProperties and second with AutomationProperties.

App.xaml:

<Application xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             x:Class="CheckBoxTest.App">  
    <Application.Resources>  
        <!-- Light theme colors -->  
        <Color x:Key="LightThemeBackgroundColor">WhiteSmoke</Color>  
        <Color x:Key="LightThemeTextColor">Black</Color>  
        <!-- Dark theme colors -->  
        <Color x:Key="DarkThemeBackgroundColor">Black</Color>  
        <Color x:Key="DarkThemeTextColor">WhiteSmoke</Color>  
    </Application.Resources>  
</Application>  

MainPage.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             x:Class="CheckBoxTest.MainPage"  
             BackgroundColor="{AppThemeBinding Light={StaticResource LightThemeBackgroundColor}, Dark={StaticResource DarkThemeBackgroundColor}}">  
    <StackLayout>  
        <Label Text="Checkboxes" HorizontalTextAlignment="Center" FontSize="Medium"  
               TextColor="{AppThemeBinding Light={StaticResource LightThemeTextColor}, Dark={StaticResource DarkThemeTextColor}}"/>  
        <CheckBox HorizontalOptions="Center"  
                  Color="{AppThemeBinding Light={StaticResource LightThemeTextColor}, Dark={StaticResource DarkThemeTextColor}}"/>  
        <CheckBox HorizontalOptions="Center"  
                  Color="{AppThemeBinding Light={StaticResource LightThemeTextColor}, Dark={StaticResource DarkThemeTextColor}}"  
                  AutomationProperties.IsInAccessibleTree="True" AutomationProperties.Name="Accept conditions"/>  
    </StackLayout>  
</ContentPage>  

These are day and night mode captures:

134566-checkbox.png

As you can see:

  • In day/light mode, the text in the second
    CheckBox
    is white, and it is unreadable.
  • In night/dark mode, the text in the second
    CheckBox
    is gray.

In another app, and I don't know why, in night/dark mode the text is black (with black background)

So is it possible to change this text color to have full control in app design?

Developer technologies .NET Xamarin
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.