コントラストテーマのテスト結果

アクセシビリティテスターによるWindows11のコントラストテーマ使用時（強制カラーモード）に行ったSmartHR機能のテスト結果が出ましたので掲載致します。

なぜコントラストテーマ使用時のテストが必要なのか？

ロービジョン（弱視）の方はテキストコントラストが低いと読みにくい場合があります。
PCの画面がまぶしく感じたり、テキストのコントラストが低いと背景色と文字色の差がわかりにくいと感じるロービジョンの方も多くいるようです。
低コントラストが見にくい方はコントラストテーマを有効にすると少ない色数になりUI要素が見やすくなります。
テキストの読みにくさの改善、目の疲れの軽減へとなるため低コントラストが見にくい方にとっても便利な機能です。

SmartHRではアクセシビリティの観点からロービジョンの方にも問題なく使用してもらうため、コントラストテーマ使用時のテストをアクセシビリティテスターが行っています。

コントラストテーマは4種類あり、見やすい色のパターンで使用できる

Windows11のコントラストテーマは4種類あり、見やすい配色を選ぶ事ができます。
選んだコントラストテーマによって強制的にシステムカラーが下記の配色パターンに変化します。

• 水生の配色パターン

• 砂漠の配色パターン

• 夕暮れの配色パターン

• 夜空の配色パターン

コントラストテーマ使用時のテストをしてわかったこと

コントラストテーマ使用（強制カラーモード有効）時にはUIで設定している色が強制的に上書きされるため、SmartHR機能の一部で表示が見えなくなっていたところがある事がわかりました。
見つかった問題をいくつかご紹介します。

ラジオボタンを選択していることがわからない

ラジオボタンを選択しても表示が変わらず、どこを選択しているか判別出来ないという問題が見つかりました。
選択しているかわからないと回答出来ないため、コントラストテーマを使用中も利用できるように改善が必要でした。

チェックボックスを選択している事がわからない

チェックボックスを選択してもボックス内にチェックが入ったのか判別出来ないという問題が見つかりました。
こちらもチェックボックスを選択されたかわからないと回答に支障があるため、改善が必要という結果になりました。

段階式評価の項目で、どこを選択しているかわからない

従業員サーベイ機能の一つであるN段階評価で回答しても、どの選択肢を選択しているか判別ができないという問題が見つかりました。
ラジオボタンやチェックボックスと同様に、改善が必要という結果になりました。

テスト結果を受け一部機能で修正を進めています

コントラストテーマ使用時のテスト結果を受けて改善を進めています。
実際にどのように改善したのかご紹介します。

ラジオボタン選択の改善

CSSのカラーコード指定が上書きされてしまうため、システムカラーを利用してラジオボタンを選択している事が判別できるように改善しました。

チェックボックス選択の改善

コントラストテーマ使用時のシステムカラーを利用して、チェックボックスにチェックがついてる事が判別できるように改善しました。

N段階評価の改善

システムカラーを利用して、選択した選択肢の外枠の色を変化させました。さらに、チェックマークを付けて判別できるように改善しました。

まとめ

コントラストテーマ使用時のテストを行い、コントラストテーマを利用しないと気付けなかった問題を見つけられました。
見つかった問題点は改善を進めています。コントラストテーマを使用するユーザーも、よりSmartHRを問題なく利用できるようにしていきます。