\n This text came from an external source, it may be hard to read... 😢\n
\n
Never fear, ReactColorA11y will fix it! 🎉
\n
\n \n)\n\nexport default App\n```\n\n## Testing\n\nIf you are unit testing your app with `jest` and `jsdom` you may see errors because of the lack of standard CSS support there. If you wish to make this wrapper transparent to the tests, you can mock it by placing this line in your [jest setup file](https://jestjs.io/docs/configuration#setupfilesafterenv-array):\n\n```js\njest.mock(\n 'react-color-a11y',\n () =>\n ({ children }) =>\n children,\n)\n```\n\nWe are using `Cypress` to test the basic functionality of this component, so you should be able to assume that the component works and not test it yourself.\n\n## Multiple Children\n\nIt is recommended to provide a single child component inside `ReactColorA11y`. If you provide multiple children, a `div` will be added around the children so that the color adjustments can be targeted correctly, but this extra element in the DOM could affect your specific styles, so it's preferred to pass only one child.\n\n## Options\n\n| prop | type | default | description |\n| ----------------------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| requiredContrastRatio | number | 4.5 | This is the contrast Ratio that is required. Depending on the original colors, it may not be able to be reached, but will get as close as possible. https://webaim.org/resources/contrastchecker |\n| flipBlackAndWhite | bool | false | This is an edge case. Should `#000000` be flipped to `#ffffff` when lightening, or should it only lighten as much as it needs to reach the required contrast ratio? Similarly for the opposite case. |\n| preserveContrastDirectionIfPossible | bool | true | Try to preserve original contrast direction. For example, if the original foreground color is lighter than the background, try to lighten the foreground. If the required contrast ratio can not be met by lightening, then darkening may occur as determined by the luminance threshold. |\n| backgroundColorOverride | string | '' | If provided, this color will be used as the effective background color for determining the foreground color. This may be necessary if autodetection of the effective background color is not working, because of absolute positioning, z-index, or other cases where determining this is complex. |\n\n## ignoreColorA11y data attribute\n\nIf you have some elements which you need to ignore in the color corrections for accessibility, you can add the data attribute `ignoreColorA11y` to those elements. A trivial example would be:\n\n```xml\n