Bold Text in mobiele apps: wat is het, configuratie van vetgedrukte tekst

Wat is Bold Text in toegankelijkheid?

Bold Text — is een systeeminstelling van besturingssystemen die het gebruik van een vet lettertype voorschrijft voor alle tekstuele interface-elementen in plaats van het standaardlettertype (regular of normal). In tegenstelling tot eenvoudige vergroting van het lettertype, verandert Bold Text de schaal niet — het vergroot de lijndikte van letters, waardoor ze meer verzadigd en contrastrijker worden tegen de achtergrond.

De functie valt onder de categorie display accommodations — beeldscherminstellingen die mensen met een visuele beperking helpen informatie comfortabeler waar te nemen. Bold Text is vooral effectief bij een lage gezichtsscherpte (amblyopie), ouderdomsverziendheid (presbyopie) en sommige vormen van dyslexie waarbij letters bij standaard dikte „dubbel” of „zwevend” lijken.

Vetgedrukt lettertype verhoogt de readability — snelheid en nauwkeurigheid van herkenning van afzonderlijke tekens. Onderzoek van Usability.gov toont aan dat vet de leesnauwkeurigheid met 12–18% verhoogt bij gebruikers met een visuele beperking in vergelijking met een regular lettertype van hetzelfde formaat. Bold Text vervangt tekstvergroting niet — beide functies kunnen worden gecombineerd.

Verschil tussen Bold Text en lettertypevergroting

Het belangrijkste verschil tussen Bold Text en Dynamic Type (iOS) of Font Size (Android) — het werkingsmechanisme. Lettertypevergroting verandert de grootte van letters, Bold Text — alleen de dikte. Bij lettertypevergroting lijdt de schermcapaciteit (er past minder inhoud op één scherm), Bold Text behoudt het aantal zichtbare elementen. Voor gebruikers met presbyopie in een vroeg stadium is Bold Text vaak voldoende zonder tekstvergroting.

Wie heeft Bold Text nodig

De belangrijkste doelgroep van Bold Text — mensen met amblyopie (verminderde gezichtsscherpte die niet met een bril te corrigeren is), presbyopie (leeftijdsgebonden verziendheid na 40–45 jaar) en sommige vormen van dyslexie. De functie is ook nuttig bij het lezen in fel zonlicht — vetgedrukt lettertype behoudt contrast bij schittering. Ondersteunende technologieën zoals VoiceOver en TalkBack werken onafhankelijk van Bold Text — de instelling heeft alleen invloed op de visuele weergave.

Bold Text in iOS: configuratie en werkingsprincipe

In iOS is Bold Text een van de oudste toegankelijkheidsfuncties, verschenen in iOS 7 (2013). De instelling bevindt zich in Settings > Display & Brightness > Bold Text en vereist het opnieuw opstarten van de iPhone: het systeem herbouwt alle lettertypen in systeemapps (Settings, Mail, Messages, Calendar, Notes) en apps van derden die het systeemlettertype San Francisco gebruiken.

Technisch gezien vervangt iOS het systeemlettertypebestand San Francisco door de vetgedrukte variant (SF Pro Bold / SF Pro Rounded Bold) op het niveau van het CoreText-framework. Na het inschakelen van Bold Text worden alle regels op het scherm — van navigatiekoppen tot knoptekst — weergegeven met font-weight 700 in plaats van 400. De ontwikkelaar kan dit gedrag niet overschrijven voor systeemelementen, maar kan lettertypen in zijn eigen interface beheren via Dynamic Type.

Voor de ontwikkelaar betekent ingeschakeld Bold Text dat alle UIFonts met textStyle (.body, .headline, .caption en andere) automatisch vetgedrukt worden. UIFontWeight bestaat in twee varianten: regular (0.0) en bold (1.0). Bij actief Bold Text verhoogt het systeem de fontWeight met 0.3–0.5 voor elke stijl. De status kan worden gecontroleerd via UIAccessibility.isBoldTextEnabled.

Bold Text controleren in iOS-app

De ontwikkelaar kan controleren of Bold Text op het apparaat is ingeschakeld en de interface aanpassen. Als tabelkoppen bijvoorbeeld al vet gebruiken, kan het bij ingeschakelde functie nodig zijn de dikte te verminderen om visuele ruis te voorkomen. De controletecode gebruikt het UIAccessibility-framework.

import UIKit

class BoldTextManager {

    // Controleren van Bold Text-status
    static var isBoldTextEnabled: Bool {
        return UIAccessibility.isBoldTextEnabled
    }

    // Aanpassen lettertype aan Bold Text
    static func adjustedFont(
        textStyle: UIFont.TextStyle,
        weight: UIFont.Weight
    ) -> UIFont {
        let baseFont = UIFont.preferredFont(
            forTextStyle: textStyle
        )
        guard isBoldTextEnabled else {
            return baseFont
        }
        // Dikte verminderen om double-bold te voorkomen
        let adjustedWeight: UIFont.Weight
        switch weight {
        case .bold, .heavy:
            adjustedWeight = .semibold
        case .semibold:
            adjustedWeight = .medium
        default:
            adjustedWeight = weight
        }
        return UIFont.systemFont(
            ofSize: baseFont.pointSize,
            weight: adjustedWeight
        )
    }

    // Gecachet lettertype met ondersteuning voor Bold Text
    static func labelFont() -> UIFont {
        return adjustedFont(
            textStyle: .body,
            weight: .regular
        )
    }
}

// Abonneren op Bold Text-wijzigingen (Notification)
NotificationCenter.default.addObserver(
    self,
    selector: #selector(boldTextStatusChanged),
    name: UIAccessibility.boldTextStatusDidChangeNotification,
    object: nil
)

@objc func boldTextStatusChanged() {
    // UI bijwerken bij wijziging van Bold Text
    updateFonts()
}

De klasse BoldTextManager controleert isBoldTextEnabled, past het lettergewicht aan (vermindert heavy/bold naar semibold/medium wanneer de functie actief is) en abonneert zich op de melding boldTextStatusDidChangeNotification. Dit voorkomt het double-bold effect, waarbij de ontwikkelaar al vet gebruikt voor koppen en het systeem ze nog dikker maakt.

Invloed op UITableView en UICollectionView

Bold Text beïnvloedt de lay-out van cellen van UITableView en UICollectionView, omdat toenemende letterdikte de rijhoogte kan veranderen. Bij gebruik van self-sizing cells (estimatedRowHeight + UITableView.automaticDimension) herberekent iOS automatisch de hoogte bij lettertypewijziging. Voor vaste celhoogtes moet de ontwikkelaar reloadData() aanroepen na ontvangst van de melding boldTextStatusDidChangeNotification, anders kan tekst worden afgesneden.

Verbeterde leesbaarheid in Android: analogon van Bold Text

In Android heet de Bold Text-functie „Verbeterde leesbaarheid” (Improve readability) in de interface en bevindt zich in de sectie „Toegankelijkheid” (Accessibility). In sommige versies van Android, vooral op Samsung One UI-apparaten, heet de functie „Tekst met hoog contrast” of High Contrast Text. De instelling is van toepassing op alle systeemelementen en de meeste apps van derden.

De technische implementatie van Android verschilt van iOS: in plaats van het systeemlettertype te vervangen, overschrijft Android het Typeface op systeemniveau via Resources.Theme. Bij activering van de instelling wijzigt het systeem het attribuut android:textStyle voor alle tekstuele elementen, waarbij bold of italic+bold wordt ingesteld. De ontwikkelaar kan de status controleren via Settings.Global.getFloat() of AccessibilityManager.

Bold Text controleren in Android-app

In Android is er geen direct API-equivalent van UIAccessibility.isBoldTextEnabled. De controle gebeurt via ContentResolver en Settings.System. De functie wordt opgeslagen in globale instellingen als font_weight_adjustment. Voor Jetpack Compose is het toegankelijk via LocalDensity en fontScale.

import android.content.Context
import android.provider.Settings
import android.util.TypedValue
import androidx.compose.ui.text.font.FontWeight

class AndroidBoldTextHelper {

    // Controleren van verbeterde leesbaarheid via systeeminstellingen
    fun isBoldTextEnabled(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "font_weight_adjustment"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — FontWeight aanpassen
    fun adjustFontWeight(
        context: Context,
        original: FontWeight
    ): FontWeight {
        if (!isBoldTextEnabled(context)) return original

        return when (original) {
            FontWeight.Bold, FontWeight.ExtraBold -> FontWeight.SemiBold
            FontWeight.SemiBold -> FontWeight.Medium
            else -> original
        }
    }

    // XML View — toepassen via TypedValue
    fun applyBoldStyleFix(context: Context, textView: android.widget.TextView) {
        if (isBoldTextEnabled(context)) {
            val paint = textView.paint
            val fakeBold = paint.isFakeBoldText
            // fakeBold verminderen als het al door systeem is ingeschakeld
            if (fakeBold) {
                paint.isFakeBoldText = false
                textView.invalidate()
            }
        }
    }
}

De klasse AndroidBoldTextHelper leest de systeeminstelling font_weight_adjustment, past FontWeight in Jetpack Compose aan en verwijdert dubbele fakeBold in XML View. In tegenstelling tot iOS biedt Android geen meldingskanaal voor de wijziging van Bold Text — de ontwikkelaar controleert de instelling bij het starten van de Activity of via ContentObserver.

ContentObserver voor het volgen van wijzigingen

Om wijzigingen van Bold Text in realtime te volgen, kan de Android-ontwikkelaar ContentObserver gebruiken. Bij wijziging van de instelling font_weight_adjustment stelt het systeem ContentResolver op de hoogte en de app kan de UI bijwerken. Dit is belangrijk voor AccessibilityService en aangepaste launchers die onmiddellijk moeten reageren op wijzigingen in gebruikersinstellingen.

CSS font-weight: soorten letterdikte

In webontwikkeling wordt de letterdikte beheerd door de CSS-eigenschap font-weight met waarden van 100 (Thin) tot 900 (Black). Standaardwaarden: normal = 400, bold = 700. Bold Text in het besturingssysteem heeft geen directe invloed op CSS font-weight — webbrowsers ontvangen geen systeemsignaal over actief Bold Text op CSS-niveau. De ontwikkelaar kan echter de CSS-mediafunctie gebruiken als het platform dit ondersteunt.

Voor iOS ondersteunt Safari de mediafunctie -webkit-text-size-adjust, maar heeft geen directe media query voor Bold Text. Op Android biedt Chrome ook geen media query voor de systeeminstelling van vetgedrukte tekst. Webontwikkelaars wordt aangeraden prefers-contrast en prefers-reduced-motion te gebruiken voor aanpassing, en voor vetgedrukte tekst — de instelling te controleren via User-Agent of reservestijlen.

Gebruik van variabele lettertypen (Variable Fonts)

Variable Fonts (OpenType Font Variations) maken het mogelijk om de letterdikte vloeiend aan te passen via CSS font-weight in het bereik 1–999 met een stap van 1 eenheid. In tegenstelling tot standaard lettertypen waar alleen discrete waarden (400, 700) beschikbaar zijn, bieden variable fonts de mogelijkheid om de optimale dikte voor elke gebruiker te kiezen. Bij toegankelijkheidsinstellingen kan een breder bereik worden gebruikt.

/* Variabel lettertype met vloeiende dikteregeling */
@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/Inter-Variable.woff2")
        format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
}

/* Aanpassen aan systeem Bold Text via klasse */
.bold-text-enabled {
    --font-weight-body: 500;
    --font-weight-heading: 700;
}

.bold-text-enabled .text-body {
    font-weight: var(--font-weight-body);
}

.bold-text-enabled .text-heading {
    font-weight: var(--font-weight-heading);
}

/* prefers-contrast: more — reservebenadering */
@media (prefers-contrast: more) {
    .content {
        --font-weight-increase: 100;
    }
    .content .text {
        font-weight: calc(
            var(--font-weight-base) +
            var(--font-weight-increase)
        );
    }
}

In het CSS-voorbeeld wordt het aansluiten van het variabele lettertype Inter Variable getoond, CSS-variabelen voor het beheren van de dikte en aanpassing via prefers-contrast: more. Variable fonts maken het mogelijk om font-weight met 50–100 eenheden te verhogen bij ingeschakeld systeem Bold Text zonder kwaliteitsverlies van de weergave. Om de status van Bold Text aan de clientzijde te bepalen, kan JavaScript-controle van de User-Agent en een klasse op het html-element worden gebruikt.

JavaScript-detectie van Bold Text op een webpagina

Omdat CSS geen directe media query voor Bold Text biedt, gebruiken webontwikkelaars JavaScript: ze maken een onzichtbaar element met een bekend lettertype, meten de breedte, wijzigen font-weight en vergelijken het verschil. Als het verschil groter is dan verwacht — is het systeem Bold Text waarschijnlijk actief. Deze methode wordt gebruikt in toegankelijkheidsbibliotheken voor automatische aanpassing van stijlen.

Hoe Bold Text de toegankelijkheid van apps beïnvloedt

Bold Text lost specifieke problemen op van gebruikers met een visuele beperking: het verhoogt het onderscheidingsvermogen van symbolen bij amblyopie, vermindert visuele vermoeidheid bij langdurig lezen en compenseert het lage contrast van het display in fel zonlicht. Volgens WebAIM Million (2025) heeft 12.3% van alle pagina's tekst met onvoldoende contrast — Bold Text kan dit gebrek gedeeltelijk compenseren aan de gebruikerskant.

Voor de ontwikkelaar valt ondersteuning voor Bold Text onder de vereisten van WCAG 2.2: criterium 1.4.1 (Use of Color) en 1.4.3 (Contrast Minimum). De app moet correct worden weergegeven met de ingeschakelde systeeminstelling Bold Text zonder verlies van inhoud, overlapping van elementen of afgesneden tekst. Testen met ingeschakeld Bold Text is verplicht bij de voorbereiding voor publicatie in de App Store en Google Play.

Aanbevelingen voor testen

Bij het testen van de app met Bold Text controleer: worden alle tekstuele elementen volledig weergegeven (zonder afsnijding), wordt de dikte niet gedupliceerd (double-bold), worden celhoogtes in tabellen correct herberekend, verschuiven elementen ten opzichte van elkaar. Gebruik Accessibility Inspector (Xcode) of Accessibility Scanner (Android) voor automatische detectie van problemen met Bold Text.

• Xcode Accessibility Inspector — lettertype-audit met simulatie van de Bold Text-modus
• Android Accessibility Scanner — controle van contrast ratio en font-weight-duplicatie
• UI Testing — schermafbeeldingtesten met ingeschakeld en uitgeschakeld Bold Text
• Dynamic Type testing — combinatie Bold Text + vergroot lettertype

Toekomst van Bold Text op mobiele platforms

Moderne iOS en Android ontwikkelen Bold Text in de richting van fijnere instellingen: iOS 18 (2024) voegde per-app lettertype-instellingen toe, inclusief dikte, en Android 16 (2025) breidde de API font_weight_adjustment uit voor ontwikkelaars. Naar verwachting zullen toekomstige versies webontwikkelaars een CSS media query voor Bold Text bieden, waardoor JS-detectie niet meer nodig is.