Checking Contrast on the iPhone 17 Pro's Super Retina XDR Display

Pick any foreground and background pair, see live WCAG 2.1 AA and AAA results for normal text, large text, and UI components, and fix failing pairs in one click.

ZERO UPLOAD · ALL LOCAL
  1. Type a foreground and a background color in any supported format (hex, rgb, hsl, hsv, oklch, or a CSS color name), or click either swatch to open the visual picker.
  2. Read the large ratio on the left and the per-tier badges in the preview: normal text, large text, and UI components each check against their own AA and AAA thresholds.
  3. When a row fails, click Fix text or Fix background to apply the closest color that passes without changing the hue. The button only appears when a passing fix exists.
  4. Use the toggle above the preview to view your exact pair through protanopia, deuteranopia, or tritanopia simulation. Ratios and badges keep reporting the true colors.
  5. Click Swap to flip foreground and background, or Share to copy a link that restores both colors for anyone who opens it.

Using this tool with the Apple iPhone 17 Pro

  • 2,000,000:1 typical OLED contrast This figure describes how dark this panel's off pixels get, not the WCAG ratio above; a pair scoring 4.6:1 stays 4.6:1 no matter how deep this screen's blacks render.
  • 3000 nits outdoor peak brightness Extra brightness helps a pair that already passes stay legible in direct sun, but it never rescues a pair that fails the ratio check, since raising brightness raises both colors together.
  • 1000 nits typical max vs 1600 nits HDR peak Most of your everyday reading on this phone happens at or below the 1000-nit typical max, not the 1600-nit HDR peak, so judge a color pair at normal brightness rather than assuming HDR headroom is doing any work for a standard web page.
Unrecognized color format
Unrecognized color format

Contrast Ratio

Colorblind Simulation

Button Text Samples

Normal Text (16px)

Body copy at 16 pixels carries most of what your visitors actually read, and it needs 4.5:1 to pass AA.

Large Text (24px Bold)

Large text passes AA at 3:1

Buttons

Continue Cancel

Reading Contrast Ratios on the iPhone 17 Pro Display

Every pixel on the iPhone 17 Pro's Super Retina XDR display is its own tiny light source, and that single fact changes how dramatic a passing dark-mode pair looks without changing a single digit this tool calculates. Apple rates the panel at a 2,000,000:1 typical contrast ratio,1 twice the figure it quotes for the mini-LED MacBook Pro display, because an OLED panel can turn individual pixels off entirely rather than merely dimming a zone behind them. That physical difference matters for how a design feels on this phone. It has no bearing on the WCAG relative luminance formula above, which only ever sees the two color values you typed, never the technology rendering them.

Specifications1

Display6.3" Super Retina XDR OLED
Resolution2622 x 1206 at 460 ppi
Contrast ratio (typical)2,000,000:1
Brightness1000 nits max (typical), 1600 nits peak (HDR), 3000 nits peak (outdoor)
Refresh rateProMotion adaptive, up to 120Hz
BrowserSafari / WebKit (all iOS browsers use the WebKit engine)

Why OLED's true black makes a passing ratio look more dramatic

An LCD panel, mini-LED backlight or not, always leaks some light through a black pixel, because a shutter layer is blocking a light source that never fully switches off. OLED works differently: each subpixel is its own emitter, so telling a pixel to show black means telling it to stop emitting light at all.2

No backlight means zero light leaves a black pixel

On the iPhone 17 Pro, a background you set to pure black renders as genuinely zero light output at that pixel, not a very dim gray standing in for black. Pair that with a light foreground color and the physical jump in brightness between the two is about as large as a screen can produce, which is exactly why dark-mode interfaces tend to look their most striking on OLED hardware. Designers who preview a dark palette exclusively on an iPhone can walk away with an inflated sense of how much contrast margin their colors actually carry.

None of that changes which pairs actually clear AA or AAA, though. A foreground and background sitting at 4.6:1 stay at 4.6:1 whether the black in that pair is a true OLED off-state or a backlit LCD's dark gray, because the formula works from the colors you specified, not from the physics of how a specific panel reproduces them.

The contrast ratio math never touches pixel emission physics

That separation is worth internalizing before you ship a design based purely on how it looks on your own iPhone. Relative luminance is calculated from the sRGB values in your design file,3 independent of gamma correction, panel technology, or how bright a given screen's backlight happens to be. Two designers holding the same hex codes get the same ratio whether one is staring at this OLED panel and the other at a decade-old office LCD.

If a pair looks borderline on a dim office monitor but gorgeous on this phone, the honest number is the one this tool reports, not the one your eyes are telling you on the most flattering screen in the room. Trusting the ratio over any single screen's rendering is what keeps a design decision consistent across every device it eventually ships to.

A 3000-nit outdoor peak, and why brightness cannot rescue a bad ratio

Apple rates the iPhone 17 Pro's display at up to 3000 nits in outdoor peak brightness mode, roughly three times the sustained brightness most laptop screens reach even at their maximum setting. That headroom exists specifically to fight ambient sunlight washing out the screen, not to compensate for a color pair that was already too close together before brightness was ever a factor.

Outdoor peak brightness only helps if your ratio already passes

That extra brightness headroom helps a passing pair stay legible in direct sunlight, where ambient light can otherwise wash out a screen entirely,4 but it cannot rescue a pair that fails the ratio check in the first place. Pushing a display brighter raises both the foreground and background proportionally, which does very little to widen the gap between them if that gap was already too narrow at the color level.5

A red-on-orange pair that scores 2.1:1 indoors will still read as red-on-orange at 3000 nits outdoors, just a more vivid version of the same illegible pairing. Judge the ratio the same way regardless of which brightness mode is active, since a bright screen can only ever make a passing pair more comfortable, never turn a failing one into a legible one.

Sources
  1. 1.

    Apple, "iPhone 17 Pro - Tech Specs," support.apple.com, accessed August 2026. https://support.apple.com/en-us/125090

  2. 2.

    KTC, "How OLED Monitors Work: Light Without a Backlight," us.ktcplay.com, accessed August 2026. https://us.ktcplay.com/blogs/technology-hub/how-oled-monitors-work

  3. 3.

    W3C, "Understanding Success Criterion 1.4.3: Contrast (Minimum)," w3.org, accessed August 2026. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

  4. 4.

    KTC, "Portable Monitor Outdoors: A Guide to Sunlight & Glare," us.ktcplay.com, accessed August 2026. https://us.ktcplay.com/blogs/support-tips/using-portable-monitor-outdoors-sunlight-glare

  5. 5.

    W3C, "Web Content Accessibility Guidelines (WCAG) 2.1," w3.org, May 2025. https://www.w3.org/TR/WCAG21/

FAQ