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

Answer 1

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:']);

Answer 2

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.

Answer 3

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>