🌓
NativeBaseでContrast警告が誤判定表示されるのを解決する
nativebaseで下記のような警告が出るケースがある。
NativeBase: The contrast ratio of 1.4434776958677475:1 for
primary.500 on transparent
これはコントラストについての警告しており、基本的にはthemeのprimary.500を調整するなどが妥当ではある。
しかしコントラストの計算がこのような関数でされており、背景がtransparentになっている場合、#000000（黒）と同等に扱われて計算されてしまい実態と違う警告がされてしまうことがある。
具体例としては明るめの背景の上にvariant="link"など透過される場合などで適切でない警告が発生してしまう
<Box bg="white">
<Button variant="link">Send</Button>
</Box>
解決策
今のところ値を調整する以外ではこのチェック自体をオフにするしか解決手段はなさそうだ。
あまり気持ちのいい解決ではないが、透過に対して計算しているので仕方がない部分にはなりそうだ
<NativeBaseProvider
config={{
suppressColorAccessibilityWarning: true
}}
>
上記のようにsuppressColorAccessibilityWarningの値で抑止できる
Discussion