Repository: ant-design
Issue: Radio button support for high contrast
Labels: Inactive

### Reproduction link

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/radio-button-high-contrast-support-srmd5m?file=/index.js)

### Steps to reproduce

1. Go to [Radio](https://ant.design/components/radio) component in the Ant Design documentation.
2. Activate high contrast mode. You can emulate high contrast in Google Chrome with DevTools.

DevTools -> Rendering -> Emulate CSS media feature forced-colors -> forced-colors: active

3. Look at the Radio button examples.

### What is expected?

On high contrast mode, should be able to differentiate the states of a radio button.

### What is actually happening?

Cannot visually differentiate checked from unchecked, or disabled states.


| | Default | forced-colors: active | forced-colors: active + prefers-color-scheme: dark |
| ---- | ---- | ---- | ---- |
| Default | <img width="223" alt="Screenshot 2023-04-14 at 15 34 25" src="https://user-images.githubusercontent.com/9751721/232058188-92f844b4-29e9-4eb2-b85a-af09bacf4e73.png"> | <img width="200" alt="Screenshot 2023-04-14 at 15 38 00" src="https://user-images.githubusercontent.com/9751721/232059132-5d6b8c19-3571-46cf-918c-5b2ea8276245.png"> | <img width="198" alt="Screenshot 2023-04-14 at 15 38 14" src="https://user-images.githubusercontent.com/9751721/232059266-154e2eb0-5a94-4033-904b-6fed2b559040.png"> |
| Disabled | <img width="222" alt="Screenshot 2023-04-14 at 15 34 19" src="https://user-images.githubusercontent.com/9751721/232058211-1daed39b-2af4-4096-8703-36841573d40f.png"> | <img width="197" alt="Screenshot 2023-04-14 at 15 37 54" src="https://user-images.githubusercontent.com/9751721/232059118-01414609-73ed-4c81-8b7c-7eca0d888f4c.png"> | <img width="198" alt="Screenshot 2023-04-14 at 15 38 10" src="https://user-images.githubusercontent.com/9751721/232059245-e32c9299-6abb-4ef3-b288-608166c0fb72.png"> | 


| Environment | Info |
| --- | --- |
| antd | 5.4.2 |
| React | react |
| System | MacBook Air M2 |
| Browser | Goggle Chrome Version 110.0.5481.100 (Official Build) (arm64)  |

---
In the reproduction link example there is an example solution combining [`<system-color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color) CSS data type and [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors) media query.

For context, from the article [Styling for Windows high contrast with new standards for forced colors](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/): 
> High contrast on Windows is an accessibility feature designed to increase text legibility and improve readability. The feature works by enabling the user to select theme colors for a scoped number of semantic elements.

The Radio component uses a visually hidden radio input element and then renders the radio button with span elements. The user agent does not correctly override the colors for this span structure since it's not using semantic elements. 

The example solution shows how one could, while in high contrast mode, implement these user agent color overrides manually for the Radio component.

Example fix screenshots and native elements for reference:

`forced-colors: active` and `prefers-color-scheme: light`
<img width="481" alt="Screenshot 2023-04-14 at 15 50 27" src="https://user-images.githubusercontent.com/9751721/232062305-de61c378-bea8-4353-8571-8761bee82518.png">
<img width="471" alt="Screenshot 2023-04-14 at 15 45 47" src="https://user-images.githubusercontent.com/9751721/232061553-77e62672-e3c3-484a-a5ed-afad53faf8fb.png">

`forced-colors: active` and `prefers-color-scheme: dark`
<img width="483" alt="Screenshot 2023-04-14 at 15 50 18" src="https://user-images.githubusercontent.com/9751721/232062740-01a79fac-f4e8-4c51-8cab-1b0f73bbe729.png">
<img width="476" alt="Screenshot 2023-04-14 at 15 45 59" src="https://user-images.githubusercontent.com/9751721/232061623-e9e54c16-8c78-4efc-ac6a-2b42281f2f6b.png">



<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->