ma moitié | CL16
PAIRING: charles leclerc x fem!reader
REQUESTED: [X] yes [] no
WORD COUNT: 5.4k
SYNOPSIS: no time better to confess than after a near-death experience, am i right?
WARNINGS: hurt/comfort, angst?, descriptions of a car crash, literally every dialogue is french so LOTS of translations (looking back now, i could have just been like “italics = french” but it’s too late), probably really inaccurate descriptions of a race bc idk logistics of races oops
as always, don’t be a ghost reader!
“je me sens vraiment bien pour aujourd'hui, c'est mauvais?” i feel really good about today, is that bad?
your eyes dragged up from the egg you had just cracked into the hot pan and onto your phone, poorly propped up against a loaf of bread. said phone’s screen displayed the view up charles’ nose, his eyelashes peeking over the apples of his cheek. no doubt, he had been holding up his phone mic against his lips, making sure you could hear him over the bustling of the garage.
a giggle caused him to bring the phone back down, full face now in frame. his eyes were furrowed as he questioned, “tu te moques de moi? c'est mauvais, je le savais.” you're laughing at me? it's bad, i knew it.
you cut him off before he could get inside his head and stress himself out, “non, non, char, ce n'est pas mal du tout. vos résultats ont été bons tout le week-end, bien meilleurs que lors de vos dernières courses.” it's not bad at all. your results have been good all weekend, much better than any of your last races.
you turned the heat down of your egg, “il n'est pas faux de penser qu'aujourd'hui sera bon aussi.” it's not wrong to think today will be good too.
“alors pourquoi avez-vous ri?” then why did you laugh?
the pout on his face was adorable. adorable and absolutely horrible for your heart, which ached lightly. you wanted nothing more than to be in his arms, arms around his neck and lips on his, kissing that pout away.
“allô?” charles’ voice brought you out of your thoughts, he scoffed playfully, “regarde-toi tu essaies de trouver une excuse.” hello?...look at you trying to come up with an excuse.
you reluctantly pulled your eyes away from his lips. at least there was one good thing about him travelling a lot for his job; whenever he called you, you could stare at his lips for as long as you wanted and he’d never know.
“je n'ai pas besoin d'excuse, mais si tu veux savoir, ta voix s'est coupée et je n'ai pas tout compris.” i don't need an excuse, but if you must know, your voice cut out and I didn't catch everything.
you lied. of course, you would. why wouldn’t you? it’s not like you could tell him ‘hey, yeah, sorry i was staring at your lips because i want to kiss them.’ years of hiding it straight down the drain, along with his friendship too.
“mon dieu, encore ça? je viens littéralement de mettre à jour le plan que nous avons,” charles sighed, “peut-être que vous avez juste besoin d'un nouveau téléphone.” my god, that again? i literally just upgraded our plan…maybe you just need a new phone.
you waved him off, flipping your egg over. oops, slightly burnt.
“ouais, ouais, le meilleur fournisseur de wifi de tout monaco, ça ne pourrait jamais être leur faute. pourquoi es-tu si catégorique sur le fait que c'est mon téléphone?” yeah, yeah, best wifi provider in all of monaco, could never be their fault. why are you so adamant it's my phone?
“parce qu'il l'est! il fonctionne parfaitement sur tous les appareils de la maison, sauf le téléphone.” because it is! it runs perfectly on every device in our house except your phone.
charles brought the phone closer to his lips again, this time, however, it was angled sideways so you could see just outside his open driver room. he spoke again, “je vais payer même pour ton nouveau téléphone si tu le veux.” i'll even pay for your new phone if you want it.
“peu importe,” you rolled your eyes, “ne devrais-tu pas être littéralement dans ta voiture en ce moment?” whatever…shouldn’t you literally be in your car right now?
before charles could reply to you, his name was called out from somewhere outside the frame. his eyes met yours through the screen, a look of understanding shared between the two of you.
he had to go.
“tu peux le faire, char,” you smiled at him, “prends ce sentiment et fais-en une réalité.” you’ve got this, char. take that feeling and make it a reality.
“je t’aime, ma moitié.” i love you, my other half.
and then he was gone, taking your heart along with him.
moitié. you hated it when he called you those pet names. in all your years of knowing charles, rarely ever did he use your name. it was always ma moitié, mon ange, petite chou, anything and everything but your name.
you hated the way it made you feel like you were more than just a friend to him. you hated the way it made you feel like maybe, just maybe, he returned your feelings too. you hated the butterflies, the clammy hands, the way your brain would just stop. you hated how easily you were like putty in his hands.
after charles had ended the call, you rushed to plate your egg before it burned to a crisp. with your coffee in one hand and plate in the other, you made yourself comfy on the couch, legs snug under a throw blanket, unmuting the tv which was already streaming the grand prix.
as you chewed on your breakfast, you couldn’t help but think back to charles’ words. he had every right to feel good about this race. this weekend had gone beautifully, with charles topping the times in every round of the qualifying. he was sitting in pole position, with carlos lined up right behind him in p3. you could only hope that the strategists at ferrari would help him succeed.
your lips involuntarily curled into a smile the second you saw charles’ car on the screen. that smile widened when his voice entered your ears, god, the way he spoke english was so perfect.
you wished you could have been there, in the garage wearing those red headphones. but sadly, you had taken too many sick days already and were saving your vacation days for the actual summer break and any grand prix that was especially significant to charles.
you watched the lights turn on one by one with great amazement. you had never known how it felt to be behind the wheel at that specific moment, not personally really. anytime you asked, charles would describe it as exhilarating, nerves just simply disappearing along with the lights. he’d also go on to say “you’d know if you karted with me instead of making me cry.”
and he was right. the two of you met way back when charles had only just started karting, at a karting race that your dad had been working as a commentator for. your mom, ever the outgoing person, quickly made friends with charles’ mom, and unlike charles on the circuit, you found yourself sitting next to a very small arthur, too young to kart alongside his brother.
when the race had finished, you and arthur were sat across from one another, a pile of ripped-up grass and flower petals between the two of you. the youngest leclerc’s toy car sat at the bottom of the pile, and at the sound of your mother saying ‘go’, the two of you dove your hands into the pile, fingernails scratching against the other’s hands, just to be the first to reach the car and pull it out.
when you felt like you had finally grasped the small car, you pulled it towards yourself, unknowingly pulling the young boy along with you. as arthur lurched forward, the car slipped out of both of your hands and flew straight into charles’ head, helmet having just been taken off.
safe to say, you had made charles cry the very first time you met him, which he never failed to bring up.
you couldn’t help but wonder, eyes following charles’ red car along the track, if you’d be where you were in life had you not made him cry. or if 8-year-old pierre gasly hadn’t seen his friend get hit in the face with a toy car or tease him for crying like a little baby in his mother’s arms, every single time he saw you at a karting event.
would you two be friends? would you even be living in this place, sharing a flat with charles leclerc, if it hasn’t been for that stupid ferrari toy car?
the very toy car that arthur had gifted you and charles as a housewarming present, which now sat on the tv trolley, between two framed pictures of you two. one at your eighth birthday, months after you two had met, and one from when you were both 19, celebrating charles’ formula 2 championship title.
the broadcast shifted to the camera in charles’ car, and you listened as he gave the team his update on his tires, and listened to them give him information in return. things were looking up for him, well-deserved after the last few shitty races.
it wasn’t until halfway into the race, right when charles had pitted for a new pair of tires, that things started to go downhill. although called in for the pit stop by the team, the mechanics had seemed unprepared for charles to pit, which caused charles to have to wait for an extra 10 seconds before exiting the pits. the lead he had built for himself slowly crumbling away, neck in neck with max’s car.
your hands gripped your empty coffee mug tightly, unmoving. you had taken your last sip just seconds before charles’ pitstop but had been too focused on the shitshow in front of you to place it down.
you flinched as charles’ angry voice came through the radio, “he’s going to get ahead of me.”
you watched as his words became reality, joining the racing line milliseconds behind the redbull car. charles tried to maneuver his car around the sides to get ahead along the straight, but max had always been good at defending, charles had told you before that it was something he had both respected and hated about the dutch driver.
the two cars drove nearly tire to tire as they drove through the chicane. your heart felt like it was in your throat, praying that the two cars didn’t touch.
you felt like someone had thrown you into an ice bath when you heard charles’ radio again, his voice was filled with anger and frustration, “something isn’t right.”
his race engineer’s voice followed shortly, “everything looks good, charles. what is wrong?”
“i don’t know, the steering is acting weird. it’s getting hard to keep it under control,” you couldn’t tear your eyes from the red car, “there’s too much oversteer. more than normal.”
fuck.
charles’ car fell behind max’s slightly going into the next turn. it was clear now that charles had pointed it out, the back of his car coming out far too much for it to be normal.
“okay, charles, we will look into that and tell you what to do. keep your head down and elbows out. the pace is looking good right now, you should be able to retake your place soon.”
what was mere seconds had felt like hours of charles trailing closely behind max’s car. it was the last turn of the lap when it happened.
charles had taken to the outer side of max’s car, still struggling to correct the oversteer, when max’s wheels locked up going into the turn. it had happened so fast. one moment, charles’ car had pulled up slightly ahead of max’s. the next, his car was spinning out, speeding straight towards the wall.
your eyes stung with tears, the mug in your hand slipping and rolling off the blanket, shattering into tiny pieces on the ground. you barely registered the sound, barely being able to hear anything over the sound of your heart racing.
your breath hitched in your throat as they replayed the crash from charles’ perspective. the deafening silence after charles’ engineer asked if he was okay made you want to throw up.
get up, charles, please, the tears felt salty in your mouth. please, please, please.
you bunched up the blanket in your hands, watching as the screen zoomed in on the car. the halo looked to still be intact, but you could barely see charles from behind the cloud of smoke.
dread clouded over you, your mind both rushing with thoughts, yet silent all at the same time. where were the fucking medics? why was no one helping him out?
after what felt like years, you saw charles helmet emerge from within the cloud of smoke. his red racesuit next. your heart continued to race, calming slightly knowing that he was conscious.
the medics reached charles’ car just as he had began moving, hands rushing to pull him up and out of his seat carefully. you watched with a bated breath as they supported him away from the red mess of a car.
but charles was stubborn, you knew this, and so you watched as he pushed away from the medics slightly, trying to walk on his own. they had backed off a bit, trailing alongside him just in case his body decided to give out on him.
and it did. on his fifth independent step, his knees buckled, the medics catching him before he hit the ground. the way charles’ head titled forward was a clear sign that he had lost consciousness.
you felt numb, watching them take him into the back of the medical car. the camera switched as soon as the car drove off, showing the reactions of the rest of the grid drivers, before panning onto the damaged redbull car, which had also been taken out of the race in the collision, albeit much less destroyed than the ferrari. not far from it, you could see max also being taken care of by another set of medics.
you felt sick.
you don’t know how long you sat there, wet eyes staring blankly into the tv, seeing but not registering. it wasn’t until a notification sounded loudly in the kitchen, recognizing the tone as the one you had reserved for members of the leclerc family, that you snapped out of it.
you rushed off of the couch, forgetting about the broken ceramic on the floor as you raced to the kitchen. it was a text from lorenzo.
ils l'emmènent à l'hôpital. they’re taking him to the hospital.
the hospital. charles was going to the hospital.
you felt all of your emotions hit you at once, the weight of it all causing you to physically hunch over the counter.
a sharp pain shot up your leg and you gasped, eyes flitting down to notice the trail of blood that you had left in your haste to reach your phone. you had been numb when it happened, but as your foot screamed out in pain, you realized you had stepped in a glass shard.
you momentarily ignored the rush of pain and nausea that was climbing up your body, hastily sending lorenzo a reply.
est-ce mauvais? is it bad?
todt a dit qu'il a repris connaissance dans la voiture, mais ils veulent encore l'emmener pour s'assurer que tout va bien. todt said he gained consciousness in the car, but they still want to take him to make sure nothing is wrong.
you felt like you could breathe again, charles was awake.
tenez-moi au courant s'il vous plaît. please keep me updated.
il va s'en sortir, ma petite. he's going to be okay, kiddo.
although he knew he couldn’t quell how you were feeling, lorenzo still tried his best. and his best was good enough for you to finally stop hyperventilating. charles would be okay. he had to be.
you rested your head against your arms, taking a deep breath to reset your brain. after a couple seconds, you raised your head, turning around to look at the small trail of red that you had dragged along with you.
your foot was still bleeding, and you decided to wrap it up before you cleaned the floor. it’d do you no good to just sit here and waste away, waiting for an update from lorenzo, or a call from charles himself.
you winced as you took a step, hand gripping the counter tightly for some support. with the lack of adrenaline coursing through your body, you were able to really feel how badly you had cut your foot.
you grabbed a towel paper and placed it against the heel of your foot, half-hopping to charles’ bathroom, where you knew he kept his first-aid kit. you had one too, but yours had consisted of only bandaids and alcohol wipes. charles had splurged on the good stuff, saying something along the lines of “all the athletes carry one.”
you weren’t sure if he was right as you had only had the pleasure of meeting fellow racecar drivers, arthur leclerc and pierre gasly, both of which had received the same kit from charles as an “it was on sale so i bought it for you” gift.
by the time you had finished cleaning out your wound and wrapping it, you felt exhausted and mentally drained. your earlier panic had left you feeling extremely cold, and you couldn’t help but catch sight of the hoodie thrown over charles’ desk chair. the same one he had been wearing the night before he left.
you pulled yourself up from the ground, throwing away the bloodied alcohol wipes and gauze packaging before hobbling over to the chair and picking up the hoodie.
you willed yourself to not tear up as you brought the hoodie up towards your nose. it still smelled like him. you couldn’t help but wish that charles was in the hoodie still, wrapping his arms around your neck and squeezing until you would cough and slap his back. it was his favourite thing to do, up there with blowing air in your ear while you were cooking and poking your skin whenever it peeked out from under your shirt.
“c'est une vengeance pour les dommages émotionnels que tu as causés quand on avait six ans." he had said once, after you yanked his ear in retaliation and demanded why he was so insistent on annoying you. it’s payback for the emotional damage you caused when we were six.
god, when you’d see him again, you were going to get your own payback for the emotional damage he caused today.
you slipped the hoodie on, the warmth of it instantly blocking out the cold you felt. you made your way back to the kitchen, wetting a towel paper and wiping at the trail of blood from the kitchen to the living room.
thank god for tiled flooring, huh? but also, fuck tile flooring because if there was a carpet in your living room, maybe your cup would have never shattered in the first place.
when you entered the living room, you found yourself faltering, eyes catching sight of the tv that was still on, now showing the repeat of charles’ crash. you looked away when the car slammed into the wall, opting to turn the tv off altogether and began picking up the pieces of what had been your favourite mug.
back in the kitchen, you stared at your phone, willing it to ring with a message or a text from charles, or anyone from his family really.
after realizing how much of an idiot you were being, you grabbed the phone yourself and started to draft a message to charles, explaining how you worried you had been and how you hoped he was okay.
one message quickly turned into several as you poured your worries out to him over text. you went from freaking out, to scolding him, to finally settling on how you couldn’t wait to see him and that you weren’t going to let him out of your sight the entire time he would be at home.
just as you had finally put the phone down, it rang. you rushed to pick it up, “hello?”
“ah, y/n? bonjour, ma petite fleur.” my little flower. pascale’s voice was so soft, like she knew exactly how you were feeling. she probably did.
the emotions you had tried so hard to suppress all came flooding out at the sound of charles’ mother.
you sniffled, “maman,”
at the sound of your voice, pascale felt her heart clench. over the last (nearly) two decades, you had become like the daughter that she had never had, and with pascale being able to see through both you and her son, she knew one day, you would become her daughter for real. she had been the one to convince you to call her ‘maman’, calling you her ‘belle fille’.
“oh, ma belle fille. tout va bien, ange.” oh, my beautiful girl. everything is okay, angel.
“comment le savez-vous?” you rubbed your eye, “vous lui avez parlé?” how do you know? have you talked to him?
“la mère sait toujours ce qui est le mieux, non?” she chuckled lightly, though you could tell she was also choked up, “son manager a dit qu'il va bien, qu'il se repose pour le moment.” mother knows best, no?...his manager said that he is fine, that he is resting for the moment.
you hummed, too choked up to say anything.
pascale cooed out your name, “mon ange, pourquoi tu ne viens pas?” why don’t you come over?
you shook your head before remembering she couldn't see you, “non, c'est bon. ça ira. je suis sûr que vous êtes plus secoué par ce qui s'est passé. je ne veux pas me mettre en travers.” no, it’s okay. i’ll be fine. i'm sure you're more shaken up by what happened. i don't want to get in the way.
pascale tsked, “petite idiote, tu ne pourrais jamais te mettre en travers du chemin. tu es de la famille, je sais que tu souffres aussi.” silly girl, you could never get in the way. you are family, i know you're hurting too.
you couldn’t help but laugh pitifully at the way she called you an idiot, “j'ai été vraiment stupide, non? j'avais tellement peur que charles parte et je ne lui aurais jamais dit ce que je ressentais.” i've been really stupid, no? i was so scared that charles would leave and i would have never told him how i felt.
pascale had been the only one to know how you truly felt about charles, having caught you crying one christmas night when charles had brought his girlfriend to join the family dinner. she had comforted you all night, and spent the whole dinner staring charles’ new girlfriend down, though you–and charles–had no idea.
“il aurait été tout aussi stupide,” pascale hummed, “je ne peux qu'espérer que ce jour l'amène à admettre ses sentiments également.” he would be stupid too…i can only hope that today causes him to admit his feelings as well.
“je te le répète, il ne ressent pas la même chose.” i keep telling you, he doesn’t feel the same.
“ouais, ouais, et je continue à te dire qu'il l'est. Je connais mon garçon, et il est amoureux de toi. Il ne s'en rend juste pas compte.” and i keep telling you, he does. i know my boy, and he's in love with you. just doesn't realize it.
the two of you chatted for a bit more, with pascale giving you live updates every so often. lorenzo and arthur both joined the conversation, commanding you take care of yourself or else they would come and bring you home.
the conversation had only just died down when pascale gasped, “oh, mon dieu! c’est charles! y/n, je vous téléphonerai après, d'accord?” it’s charles, i’ll call you after, okay?
your breath hitched in your throat, “bien sûr.” of course.
it felt like forever, waiting for her to call back, or for charles to reach out to you on his own. yet nothing happened.
sometime later, your phone buzzed with a text from lorenzo.
il va bien. Il rentre pour finir son travail avec les médias, mais il prend l'avion ce soir. he's okay. he's going back to finish his media duties, but he'll fly back tonight.
c'est un soulagement. that’s a relief.
viens. je vais chercher charles et le ramener à la maison. il voudra te voir. come over. i'll be picking up charles and bringing him home. he will want to see you.
non, c'est bon. je le verrai quand il reviendra à l'appartement. no, it's fine. i'll see him when he comes back to the apartment.
y penser? think about it?
you left him on read. as much as you wanted to see him, you weren’t sure you wanted to in front of his entire family as well. who knew how you would react?
not long after, you found yourself in front of the tv again, much like you had been earlier in the morning, only this time charles was no longer in a smoking car, but rather in front of a bunch of mics and cameras.
you watched as he answered questions about the car, the oversteer, and how he had felt in the moment. your heart ached as you stared at his face, he looked so tired. he’d grimace every time he moved, so lightly that no one would notice. but you did, you’d learned to identify any subtle expression changes early on in your friendship with charles. he was a stubborn man, but you were nothing if not just as stubborn.
you didn’t know when you fell asleep, eyes getting heavier and heavier as you watched charles answer the same questions again and again. you also didn’t know how long you slept for, the stress and tension of the day had left you exhausted.
you barely stirred when the lock of your house opened, or when the keys chimed loudly as charles placed them in the key bowl near the door. when he was picked up by lorenzo, he had told him to take him to your shared apartment immediately. lorenzo, who knew what was coming, didn’t question a thing, just gave his brother a smile and a quick “it’s about time” before driving.
the driver turned around, leaving his luggage near the entrance. the sound of the tv was quiet, but charles could hear it. his eyebrows furrowed, it was late. were you waiting for him to come home? he walked towards the living room, stopping when he caught sight of you on the couch, asleep.
he quietly walked forward, hand blindly grabbing at the tv remote and turning it off. his eyes followed down your figure, lingering on the hoodie you had been wearing before moving down to the bright white gauze you had wrapped around your foot earlier.
he kneeled down next to you, hand lightly grazing the rough wrapping, “oh, mon dieu, ce qui vous est arrivé, ange?” oh, my god, what happened to you, angel?
at the sound of his voice, you stirred. charles cursed himself for being loud, although his words had been whispered so quietly. charles retracted his hand, shushing you lightly as you groaned.
“rendors-toi, amour.” he lightly pressed a hand against your fluttering eyes, blocking out the light from above. go back to sleep, love.
“charles?” you pushed your head up, cheek nuzzling into his palm, “c'est toi? tu es vraiment là?” is that you? are you really here?
charles could feel his heart break inside his chest. how many times had you woken up tonight, expecting to see him but then be wrong? how many times had you dreamt of him coming back home?
charles rubbed his thumb against your cheek, “oui, c’est moi. je suis là.” yes, it’s me. i’m here.
you blinked twice, vision clearing enough to see the man you had been waiting for, sitting right in front of you. your eyes instantly pooled with tears, “charles?”
he rushed to soothe you, “ne pleure pas, mon amour. je suis là, je vais bien.” don't cry, my love. i'm right here, i'm okay.
you reached up and grabbed the hand that had been resting on your cheek, “tu ne comprends pas. j'ai eu si peur pour toi.” you don't understand. i was so scared for you.
you sat up and charles moved to grab your other hand in his as well.
he squeezed them softly, “je suis désolé, mon ange, tellement, tellement désolé. je ne voulais pas te faire peur aujourd'hui.” i’m so sorry, my angel, so, so, sorry. i didn’t mean to scare you today.
you lurched forward, hands escaping his and instead wrapping around his neck. charles’ own hands found themselves in new places as well, one wrapped around your back while the other flew behind him to keep the two of you from toppling over.
his heart tightened, feeling his neck get wet with your tears as you sniffled loudly. his other hand found itself wrapping around you as well, pulling you closer to his body.
charles moved the two of you into a more comfortable position, stretching his legs out so that you were essentially sitting in his lap, straddling him, “je suis désolé, y/n,” he apologized again.
at the sound of your name slipping through his lips, you couldn’t help the sobs that escaped your own. charles’ grip around you tightened, “hey, what’s wrong? qu'est-ce qu'il y a?” what’s the matter?
you shook your head, “tu es si méchante, charles. je n'ai même pas pu te dire que je t'aimais quand tu as raccroché ce matin.” you are so mean, charles. i didn't even get to tell you i loved you when you hung up this morning.
he lightly coerced you to pull your head back, “oh, mon coeur, je suis désolé.” he felt like a broken record, apologizing again and again, but in the moment, nothing was coming to his head.
you leaned back, puffy eyes connecting with his own, which were tinged red, a sign that he had been crying as well, “ce n'est pas ta faute. c'est la mienne. je ne t'ai jamais dit ce que je ressentais, et je m'en voulais tellement de ne pas l'avoir admis plus tôt. quand tu n'es pas sorti de la voiture tout de suite, j'ai eu tellement peur de t'avoir perdu. perdu avant d'avoir pu te dire que je t'aimais.” it's not your fault. it's my fault. i never told you how i felt, and i was so angry at myself for not admitting it sooner. when you didn't get out of the car right away, i was so afraid that i had lost you. lost before i could tell you that i loved you.
charles’ tears spilled out of his eyes, “c'est ma faute aussi.” his words were the same as pascale’s, “j'ai toujours eu trop peur de te dire ce que je ressentais parce que j'étais trop égoïste. je ne voulais pas te perdre, alors je ne t'ai jamais dit ce que je ressentais.” it's my fault, too. i was always too scared to tell you how i felt because i was too selfish. i didn't want to lose you, so i never told you how i felt.
“tu m'aimes?” your voice was so soft, as if scared to be wrong. you love me?
charles placed his forehead against yours, “tellement. je t'adore plus que tout ce que j'ai jamais aimé.” so much. i adore you more than anything i've ever loved.
the tears slipped out as you relished in his revelation, “je t'aime. mon dieu, je t'ai aimé aussi longtemps que je me souvienne.” i love you. my god, i've loved you for as long as i can remember.
charles leaned up, kissing your tears away, “je te promets qu'à partir d'aujourd'hui, tu ne pleureras plus jamais à cause de moi.” i promise, from today forward, you will never cry because of me ever again.
your eyes fluttered shut at the feeling of his lips against your skin. he couldn’t help it, placing soft kisses against your eyelids.
his hands followed down your spine, resting at the base of your waist, “on va te mettre au lit, mon ange.” let's get you to bed, angel.
“je peux m'allonger avec toi?” can i lay with you?
“toujours, à partir de maintenant et pour toujours.” charles smiled lightly, “je suis tout à toi, ma moitié.” always, from now on and forever…i am all yours, my other half.
2K notes
·
View notes
Conseils accessibilité graphique
Je me dis que c'est le bon moment pour re-poster ce post de 2021 qui trainait dans mon ordi, suite au message de @petrichorpg !
Point à noter :
L'accessibilité, ce n'est pas tout ou rien. On peut améliorer beaucoup de choses et d'autres seront plus difficiles car nous n'avons pas les connaissances, les compétences, le temps ou l'énergie. Le plus important, c'est de s'y mettre.
Même si je suis un fervent admirateur du design dit universel (bon pour tout le monde), l'accessibilité a aussi ses besoins de personnalisation. Certains handicaps, maladies, neuroatypies requièrent des aménagements précis et qui n'iront pas à tout le monde.
-> Exemple : des personnes liront mieux en grand, d'autres en petit (vision tubulaire) ; un dark mode hyper contrasté conviendra bien à quelqu'un mais sera trop "bright" pour d'autres (c'est mon cas, j'adore le dark mode mais souvent, les textes sont trop lumineux pour moi).
Mais globalement, les conseils ci-dessous répondent à beaucoup de besoins et permettent d'améliorer l'accessibilité globalement. Ils sont majoritairement issus des recommandations internationales (et sinon, à travers mon expérience de graphiste).
J'ai encore pleins d'idées sous le coude mais bon, là j'ai déjà corrigé certains éléments de cette liste partagée en 2021. On verra pour le reste un jour aha
Je suis ouvert à toute question, clarification et correction en commentaire !
“Mais souvenez-vous que vous ne faites pas ce design pour des designers. Vous concevez un site pour des utilisateurices varié·es aux besoins divers, et avec différents outils pour y accéder.”
(terminologie : user -> utilisateur·trice / dys’ -> raccourci pour évoquer une partie ou l'ensemble des troubles d'apprentissage dont le préfixe est « dys »)
Typographies :
Textes tout en uppercase/capitales : À éviter sur tout un paragraphe, à garder pour de court mot ou court texte (1 ligne)
-> Pourquoi ? Globalement, les textes tout en capitales manquent de lisibilité à cause de l’absence des repères de lectures comme les lettres qui montent (l,d,k) et qui descendent (p,j).En majuscules, toutes les lettres sont à la même hauteur.
Textes tout en lowercase/minuscules : À éviter aussi, les majuscules servent de repère de lecture pour savoir quand une phrase débute ;).
Texte centré : Éviter les textes centrés quand ils sont trop longs (longues lignes ou beaucoup de lignes).
-> Pourquoi ? Les lignes d'un texte centré ne débutent pas aux mêmes endroits et la lecture en est impactée. À garder pour de très courts textes type 2 lignes (citation, titre et sous-titre court...)
Texte justifié : Éviter globalement (oui je sais, 98% des forums ont leurs textes justifiés aha....)
-> Pourquoi ? Sur le web, on peut difficilement gérer les espaces entre les mots. Un texte justifié va donc créer des espaces + ou - grands entre chaque mot pour combler l'espace et rentrer dans une largeur fixe, ce qui peut complexifier la lecture (l'oeil va plus difficilement sauter d'un mot à l'autre en gros).
Texte aligné sur la gauche : À privilégier au max, surtout les longs textes ! Je sais que le justifié rend plus "esthétique" car tout est aligné. Si on veut les garder, plutôt pour les textes de catégories et privilégier le texte aligné à gauche (dans le jargon on parle de ferré à gauche) pour la majorité des textes type annexes, rp...
Line-height (espace entre les lignes) : Pour les paragraphe, il est recommandé d'avoir un line-height de x1.5 de la taille du texte.
-> Exemple : paragraphe en 16px → 16x1.5 = votre line-height. Pour les grands titres, j'ai tendance à descendre à x1.3 généralement car normalement les titres sont courts et grands.
Letter-spacing (espace entre les lettres) : Éviter de changer les espacements de lettres, surtout sur ce qui est titre et paragraphes. Normalement une typographie a des espaces précis pour faciliter sa lisibilité. En ajouter peut créer des difficultés de lecture.
Niveaux de titres (ce qu'on nomme H1, H2, H3) : Choisir plusieurs niveaux de titres et s'y tenir. Il faut que chaque élément ayant le même niveau d’informations soit dans le même style graphique à chaque fois pour aider à comprendre la structure :)
-> Exemple : tous les titres d’annexes = tel css / tous les boutons = tel css / tous les sous-titres = tel css.
-> Partage d'infos en plus : les Hr ont aussi un rôle de structure pour les lecteurs d'écran (logiciel qui restitue vocalement ou en braille l'information écrite. Ils sont utilisés par certaines personnes aveugles, malvoyantes, qui ont des troubles cognitifs...).Je n'en parlerai pas dans cette liste car je n'ai pas de connaissance sur la facilité d'usage de Forumactif avec un lecteur d'écran.
Taille de texte : Sur le web, il est recommandé d'écrire en 16px minimum pour les paragraphes.
Accent et texte : Garder les accents sur les majuscules (À, É) facilite aussi la compréhension des textes.
Largeur de textes : Normalement sur FA, on n'a pas ce soucis, mais on conseille globalement d'avoir entre 50 et 70 caractères, espaces compris, par ligne pour une bonne lisibilité. Le but n'est pas de calculer chaque ligne mais de se rendre compte de ce que ça signifie visuellement ( j'utilise le site compteursdelettres).
Mise en valeur :
Changement de typographie : Éviter les changements de typographies dans des paragraphes pour mettre en valeur des éléments ! Plutôt utiliser le gras, une couleur différente ou un surlignement en couleur discrète (mais visible, faut juste pas que ça soit TROP visible).
Nombre de mises en valeur : normalement, une mise en valeur ne devrait pas être trop présente car sinon...ça voudrait dire que tout le texte est important aha. Restons utile et efficace : un peu de gras, un surlignement si besoin d'avoir 2 CSS de mises en valeur mais ne faisons pas un sapin de noël.
Italique : Utiliser l'italique avec parcimonie (manque de lisibilité sur certaines typographies). En général, l’italique sert pour des citations courtes, des mots en langue étrangère à celle du texte, des noms propres ou d’ouvrages, pas juste pour “faire joli”.
Soulignement : Éviter d’utiliser le soulignement pour des éléments non-cliquable. C'est un code connu et reconnu dans le web pour visibiliser les liens alors autant l'utiliser comme le cerveau s’y attend :)
Liens et infos :
Élément cliquable (bouton, lien, flèche...) : pas trop petit et éviter des éléments cliquables trop proches les uns des autres.
-> Pourquoi ? Une personne qui a des troubles de la vision ou de la motricité pourrait galérer à cliquer au bon endroit si c'est trop petit / trop proche d'un autre élément cliquable !
Lien et css : je conseille toujours de garder le soulignement pour les liens, c'est un code connu du web alors autant de ne pas réinventer la roue. On peut ne pas avoir de soulignement pour ce qui est "logique" (genre les menus, on sait globalement que c'est cliquable) mais un lien dans un texte, on garde le soulignement !
-> Note : Un lien en couleur seule n'est souvent pas suffisant, surtout si on utilise déjà la couleur et/ou le gras pour mettre en valeur (il y a des cas à la marge mais j'essaye de rester efficace).
Cacher du contenu : Éviter de trop dissimuler du texte dans des collapses/accordéons. Plus les textes seront cachés, plus ça créer un sentiment de “mauvaise” surprise chez les users qui se retrouvent à lire 4x plus de texte que ce qu'iels pensaient.
Renseigner ce qu'on va trouver : Sur de longues annexes, ne pas hésiter à préciser le contenu avec une introduction courte qui résume ou avec un mini sommaire. Pourquoi pas y ajouter des ancres (html) pour faciliter la navigation dans l’annexe.Liens entre les informations : Ne pas hésiter en fin d’annexe/contexte à mettre des liens vers d’autres sujets qui serviront à mieux comprendre ce que les membres ont lu juste avant. Pas tous les liens, juste ceux autour des informations évoquées au dessus. En gros, aider les users à mieux comprendre en leur indiquant où se rendre ensuite !
Plan de forum : Sur un site, on conseille d'avoir une page "Plan du site", qui récapitule toutes les pages. Je me dis qu'un post "plan du forum", spécifiquement pour la partie annexe, peut-être très cool.
Couleurs :
Contraste général : Ni trop fort, ni trop faible. Dans les recommandations officielles d'accessibilité, on parle de ratio de contraste. Il existe des outils pour tester les couleurs de texte sur les couleurs de fonds pour voir si on est dans les clous.
-> Comment s'y prendre ? Je vous recommande l'outil Color Contrast Analyser qui est un logiciel sur Mac et Windows : vous entrez la couleur de texte (1er plan) et la couleur de fond (2e plan) pour obtenir un ratio de contraste. L'objectif est de viser la conformité sur "texte normal" et "texte grand" du niveau "AA" (je conseille toujours le niveau AA car sinon on rentre dans des choses plus précises type si texte plus de 24px, on peut être moins contrasté etc...)
D'autres site de contraste (si besoin, je serais ravi de faire une vidéo pour montrer comment les utiliser) : Colorsafe.co ou Contrast-finder
Couleurs pures ou vives : Éviter les couleurs dites pures (noir #000 sur blanc #FFF, etc) ou très vives. Privilégier des nuances comme un noir coloré, grisé ou un blanc cassé, une couleur descendue et pas flashy, surtout pour ce qui est texte ! Même si le contraste sera bon, certaines couleurs trop vives peuvent entrainer des migraines ou autre sensibilité à la lumière.
Gifs : Éviter les gifs avec flash de couleurs ( type spot de soirées) ou flash trop rapides / répétition. Ça peut entrainer une crise d’épilepsie photosensible chez les personnes épileptiques (et aussi des migraines). Ou alors prévenir en amont. Donc à éviter sur des headers, à un moment c'était assez tendance.
-
Éléments animés : Toujours laisser la possibilité d'arrêter une animation (ex : un fond de forum qui bouge pour donner un côté grain de vieux film -> on a un bouton qui permet de stopper cette animation.) Ça peut être plus complexe à faire mais une animation qui tourne en boucle, niveau concentration, c'est chaud :/
Information et couleurs : Ne pas signaler une information uniquement par la couleur
-> Exemple : "info importante en rouge" ou pour diviser une liste d'info "en rouge les malus, en vert les bonus".
-> Pourquoi ? Les personnes daltoniennes verront le rouge jaune/marron ou rose (il existe plusieurs types de daltonisme).
-> Comment ? En plus d'une couleur, on peut accompagner d'un pictogramme, d'un symbole (triangle rouge = telle info ; carré vert = telle info), ou d'un mot, tout simplement. Ne pas oublier la légende ;) En plus, c'est top pour apporter un peu plus d'identité graphique !
Récurrence d'usage des couleurs : Utiliser chaque couleurs pour les mêmes éléments au fil des pages.
-> Exemple : Une palette avec du bleu doux , du gris perle et du bleu marine : le bleu doux pour tous les boutons et liens, le bleu marine pour tous les titres, le gris perle pour les separateurs....
Autres :
Poids des visuels : L'accessibilité concerne aussi l'accès à l'information quel que soit notre matériel ou notre type de connexion. Tout le monde n'a pas la fibre et des headers de 3 mo (oui j'a déjà vu :/) peuvent être très pénibles à charger.
-> Conseils : N'oublions pas de diminuer le poids de nos images en passant par des logiciels de compression (compress jpg ; compress png ; compress gif). Il est toujours possible de trouver le juste milieu entre qualité et poids !
Laisser la parole : que ce soit dans un post dédié, un questionnaire en ligne et anonyme, par MP au staff ou dans la fiche de présentation (le forum Maybe this time le propose par exemple), on peut intégrer la possibilité de faire des retours d'accessibilité ou préciser des besoins précis. On ne peut pas penser à tout et peut-être qu'un besoin remonté par un·e membre aidera d'autres qui n'ont pas osé en parlé !
Pour aller plus loin :
En anglais : conseils sur les couleurs pour les personnes avec des handicaps visuels
Designing-for-color-blind-users
Colour-accessibility
En français : accessibilité, design, webdesign
Le site design accessible
74 notes
·
View notes