React Native working with NativeBase: WARN NativeBase: The contrast ratio of 1:1 for darkText on transparent

Question

I'm programming a React Native App using NativeBase.io

In my app where I use NativeBase I am getting the following error.....how do I fix this?

Here is the error:

WARN NativeBase: The contrast ratio of 1:1 for darkText on transparent falls below the WCAG recommended absolute minimum contrast ratio of 3:1. https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast InputBase@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:193716:28 RCTView View @http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:150602:25 Box@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:191721:24 InputAdvance@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:193858:33 Input@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:193651:24 RCTView View @http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:150602:25 Box@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:191721:24 UserListScreen@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:223372:50 StaticContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:234421:17 EnsureSingleNavigator@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:230142:24 SceneView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:234305:22 RCTView View RCTView View Background@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:236500:21 Screen@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:237782:108 RNSScreen AnimatedComponent@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:67782:80 AnimatedComponentWrapper Screen@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:238098:36 MaybeScreen@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:237954:24 RNSScreenContainer ScreenContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:238211:31 MaybeScreenContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:237923:23 RCTView View SafeAreaProviderCompat@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:237712:24 BottomTabView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:226059:30 @http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:234075:24 BottomTabNavigator@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:225921:32 EnsureSingleNavigator@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:230142:24 BaseNavigationContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:229651:28 ThemeProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:235690:21 NavigationContainerInner@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:235550:26 SSRProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:193075:25 ToastProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:204142:24 PortalProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:201313:50 HybridProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:214396:24 RNCSafeAreaProvider SafeAreaProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:154679:24 NativeBaseConfigProviderProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:148509:27 ThemeProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:145479:38 NativeBaseProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:214282:33 Provider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:216267:21 App@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:108372:54 RCTView View RCTView View AppContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:75251:36 DanceConnectyCube(RootComponent)@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DanceConnectyCube:82468:28 undefined

score 5 · Accepted Answer · edited Oct 09 '21 at 21:04

5

I also had the same warning. I tried some colour changes in my components and I found the problem, input bg colour is white and also my view background is "light.100". I changed my colour to "transparent" or "muted.500" and the warning disappeared. This warning allows us to better manage colours for dark mode.

edited Oct 09 '21 at 21:04

RiveN

2,595
11
13
26

answered Oct 08 '21 at 12:18

veabs

74
5

tuanngocptn · Answer 2 · 2022-02-16T08:23:37.397

2

If you are following the design from your designer, And you can't change that color, you can skip the warning with LogBox.

Add below lines to your index.js file

import {LogBox} from 'react-native';

LogBox.ignoreLogs(['NativeBase:']);

edited Feb 16 '22 at 08:23

answered Jan 12 '22 at 09:57

tuanngocptn

1,241
13
21

score 0 · Answer 3 · answered Jan 05 '22 at 14:23

0

In my case the problem was use of variant="outline" prop to get an outlined button. Changing colours or colour-schemes didn't worked for me. Using borderWidth: 1 as style prop instead, made the error disappear.

answered Jan 05 '22 at 14:23

Rafa2602

423
4
12

score 0 · Answer 4 · answered Feb 08 '22 at 21:13

I ran into this with an outline button. The warning "The contrast ratio of 1:1 for darkText on transparent" is referring to the background color of the button.

Here's a dark-on-white, light-on-black outline button that works in both light and dark modes, without hard-coding color values (other than black and white):

import { useContrastText } from 'native-base';

const bgLight = "white";
const bgDark = "black";
const lightContrastColor = useContrastText(bgLight);
const darkContrastColor = useContrastText(bgDark);

<Button
    variant="outline"
    colorScheme="light"
    _light={{ bg: bgLight, borderColor: lightContrastColor, _text: { color: lightContrastColor } }}
    _dark={{ bg: bgDark, borderColor: darkContrastColor, _text: { color: darkContrastColor } }}
    onPress={() => null}>Lorem Ipsum</Button>

React Native working with NativeBase: WARN NativeBase: The contrast ratio of 1:1 for darkText on transparent

4 Answers4